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

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

你的名字 2021-11-24 00:14 399阅读 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">

盒子模型练习题

第一阶段作品展示

你需要提交的作品：
按照课程视频，搭建自己的一个网站，可以参考框架
<!DOCTYPE HTML>

无标题文档

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

 任务一
 问题：金小丹是个初学web的小美眉，她想要用一个A标签，实现如下图的效果。

为了实现这样的效果，小丹写了以下代码，但是运行时却出现了问题，到底是哪里出现了错误了，请你帮帮她吧，小美眉肯定会很感谢你的哦~
 任务：请你帮助小丹同学找到代码中的bug，并修改正确。
我们知道你很想英雄救美，但是如果英雄气短了，怎么办呢？不用担心，我们给你准备了求助卡和军师卡。加油吧，少年！
 求助卡：到微信群内找伙伴寻求帮助，问问大家是怎么解决的。
 军师卡：到平台问答区发帖向辅导老师请教，请军师给你指点迷津。
 金小丹写的代码
HTML部分：
我是一个链接
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 href-"http://www.tjzhic.com/zh/yzxx.jsp"

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

我们经常会在浏览网站的时候看到轮播图组件，轮播图组件主要用来展示多个主题、产品、美图之类的，是个很常用的组件。比如淘宝：

比如京东：

任务：实现一个简易版的自动轮播图效果，图片循环播放images中的4张图片。
考核点：
1.js获取DOM元素
2.setInterval定时器的使用
本题素材为以下4张图片，分别为1.jpg, 2,jpg, 3,jpg, 4.jpg