【艾琪出品】-Web前端综合案例开发、学习资料
作者：互联网
【声明】本博客内容，若有侵权请告之,会删除 非商业用途,如有侵权,请告知我,我会删除
如回复不及时，或不懂的请加我 微信 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>
<!--在此定义一个类选择器myBox，根据要求设置相关CSS属性-->
</head>
<body>
<!--在此添加一个div标签，并设置其class属性为myBox-->
</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
标签：Web,代码,出品,jpg,艾琪,任务,军师,图片 来源： https://blog.csdn.net/island33/article/details/97492341