【艾琪出品】-Web前端综合案例开发、学习资料

你的名字 2021-11-24 00:14 266阅读 0赞

【声明】**本博客内容，若有侵权请告之,会删除 非商业用途,如有侵权,请告知我,我会删除**

**如回复不及时，或不懂的请加我****微信 island68 QQ823173334** **可以的话注明来自CSDN**

**很希望通过CSDN这个平台与大家交流**

**Web前端综合案例开发**

小试牛刀  
  
任务一：在body标签中添加一个div，设置其class属性为myBox。  
提示:  
根据任务要求设置相关CSS样式: 盒子的宽度为200px，高度为100px，边框线为1px的红色实线，盒子距页面有10px的上边距，盒子中的内容距左侧有15px填充。  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>盒子模型练习题</title>  
  
</head>  
<body>  
  
</body>  
</html>

第一阶段作品展示

你需要提交的作品：  
按照课程视频，搭建自己的一个网站，可以参考框架  
<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<title>无标题文档</title>  
</head>  
<body>  
</body>  
</html>

最强大脑-Web前端综合开发案例

 任务一  
 问题：金小丹是个初学web的小美眉，她想要用一个A标签，实现如下图的效果。  
  
为了实现这样的效果，小丹写了以下代码，但是运行时却出现了问题，到底是哪里出现了错误了，请你帮帮她吧，小美眉肯定会很感谢你的哦~  
 任务：请你帮助小丹同学找到代码中的bug，并修改正确。  
我们知道你很想英雄救美，但是如果英雄气短了，怎么办呢？不用担心，我们给你准备了求助卡和军师卡。加油吧，少年！  
 求助卡：到微信群内找伙伴寻求帮助，问问大家是怎么解决的。  
 军师卡：到平台问答区发帖向辅导老师请教，请军师给你指点迷津。  
 金小丹写的代码  
HTML部分：  
<a href=”” class=”alink”>我是一个链接</a>  
CSS部分：  
.a \{  
padding:　0 15px;  
background:　\#337ab7；  
color：\#fff;  
line-height: 40px;  
border-radius: 5px;  
\}

 任务二  
 问题：  
严小光同学遇到了一个这样的问题：  
图片名称为“yzxx.png”，假设该图片与网页文件在同一个文件夹内，超链接的链接地址为http://www.tjzhic.com/zh/yzxx.jsp。  
他在编写代码时候出了些问题，导致运行后得不到如下图所示的结果。  
 任务：请你帮他请在核心代码中挑出错误，并修改正确。  
这道题是不是比较简单，但是如果你也遇到问题了，怎么办？给你支个招吧，你可以使用求助卡和军师卡。  
 求助卡：到微信群内找伙伴寻求帮助，问问大家是怎么解决的  
 军师卡：到平台问答区发请教贴给辅导老师，请军师给你指点迷津  
  
 严小光的代码  
跳转到百度：<a href-"http://www.baidu.com">百度<a>   
图片超链接：<a href-"http://www.tjzhic.com/zh/yzxx.jsp"><img src="yzxx.png" ><a>

第三阶段作品展示-Web前端综合案例开发

我们经常会在浏览网站的时候看到轮播图组件，轮播图组件主要用来展示多个主题、产品、美图之类的，是个很常用的组件。比如淘宝：  
  
比如京东：  
  
任务：实现一个简易版的自动轮播图效果，图片循环播放images中的4张图片。  
考核点：  
1.js获取DOM元素  
2.setInterval定时器的使用  
本题素材为以下4张图片，分别为1.jpg, 2,jpg, 3,jpg, 4.jpg