HTML5和CSS3开发第五章课后作业

1.制作图5.38所示的北大青鸟课程介绍页面。页面要求如下，
>使用<div>.<p>.<span>等标签编辑页面，页面整体背景颜色使用线性渐变
（#ECECEC，#FFFFED）.
课程特色字体颜色为绿色（#5C9815），设计理念字体颜色为橙色（#F26522）.
>课程特色和设计理念每行开头带背景颜色的字体为白色，背景颜色从提供作业素材的页面
效果图中获取、使用结构伪类选择器元素。

>使用外部样式表创建页面样式。

body{background: -webkit-linear-gradient(#ECECEC,#FFFFED);width: 575px;
}
body div div:first-of-type{color: #5C9815;
}
body div div:last-of-type{color: #F26522;
}
span{color: white;
}
body div div:first-of-type p:nth-of-type(1) span{/*第一个div下的第一个span标签*/background: #226600;
}
body div div:first-of-type p:nth-of-type(2) span{/*第一个div下的第二个span标签*/background: #7FFF82;
}
body div div:first-of-type p:nth-of-type(3) span{/*第一个div下的第三个span标签*/background: #58B6FF;
}
body div div:first-of-type p:nth-of-type(4) span{/*第一个div下的第四个span标签*/background: #2E65FF;}
body div div:first-of-type p:nth-of-type(5) span{/*第一个div下的第五个span标签*/background: #000873;
}body div div:nth-of-type(2) p:nth-of-type(1) span{/*第二个div下的第一个span标签*/background: #FF6E06;
}
body div div:nth-of-type(2) p:nth-of-type(2) span{/*第二个div下的第二个span标签*/background: #B60C01;
}
body div div:nth-of-type(2) p:nth-of-type(3) span{/*第二个div下的第三个span标签*/background: #B6008D;}
body div div:nth-of-type(2) p:nth-of-type(4) span{/*第二个div下的第四个span标签*/background: #B60C01;
}
body div div:nth-of-type(2) p:nth-of-type(5) span{/*第二个div下的第五个span标签*/background: #7C00B8;
}
body div div:nth-of-type(2) p:nth-of-type(6) span{/*第二个div下的第六个span标签*/background: #7C00B8;
}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>北大青鸟课程介绍页面</title><LINK href="../CSSFile/Homework3.css" rel="stylesheet" TYPE="text/css">
</head>
<body><div><img src="data:images/Homework3/title.gif"><h3><img src="data:images/Homework3/img_01.png"> </h3><div><p><span>逆向课程设计：</span>以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致</p><p><span>模拟学员学习路线：</span>强调难点和复杂技能点的反复训练，力求学习效果和学习体验</p><p><span>互联网作为教学环境：</span>学员的日常教学和训练均在互联网线上进行</p><p><span>学习挡板监控网上学习效果：</span>每个学习阶段设置线上线下测试，严密监控学习效果</p><p><span>真实开发项目经验积累：</span>采用专业互联网企业提供的真实项目作为模拟开发/p></div><h3><img src="data:images/Homework3/img_02.png"></h3><div><p><span>【实用性】—— </span>以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术</p><p><span>【权威性】—— </span>与来自百度等知名企业的专家联合开发</p><p><span>【专业性】—— </span>引进业内资深人才和典型行业开发项目</p><p><span>【真实性】—— </span>在互联网真实环境下进行教学和训练</p><p><span>【易学性】——</span>在线培训模式，24小时专家在线解答疑难问题</p><p><span>【完整性】—— </span>利用SNS虚拟社区：学习、人脉双丰收</p></div></div>
</body>
</html>

2.制作席慕蓉的《初相遇》

页面总宽度为400px，整体背录颜色线性渐变（#CAEFFE#FFFED)
使用<h1>标签排版文本标题，字体大小为18px，黑色文字阴影。
使用<p>标签排版文本正文，首行缩进为2em.行高为22px，
首段第一个“美”字，字体大小为180x，加相显示。黑色和白色文字阴影具体方向参考
素材效果图。第二段中的“胸怀中满溢…在我眼前”字体风格为倾斜。颜色为蓝色，字
体大小为16px，正文其余文字大小为12px.
最后一段文字带下划线。
使用外部样式表创建页面样式。
>页面中的字体颜色从提供作业素材的页面效果图中获取。

div{width: 400px;background: -webkit-linear-gradient(#CAEFFE,#FFFFED);
}
h1{font-size: 18px;text-align: center;color: blue}
h1 span{font-size: 14px;color: gray;text-shadow: black 1px -1px;
}
p{font-size: 12px;text-indent: 2em;}
div p:first-of-type span{font-size: 18px;color: #7C00B8;font-weight: bolder;
}
div p:nth-of-type(2) span{font-size: 16px;color: #2E65FF;font-style: italic;
}
a{color: green;
}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初相遇--席慕蓉</title><link href="../CSSFile/Homework4.css" rel="stylesheet" type="text/css">
</head>
<body><div><h1>初相遇    <span>文/席慕容</span></h1><p><span>美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。</p><p>我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。<span>胸怀中满溢着幸福，只因你就在我眼前</span>，对我微笑，一如当年。</p><p><a href="#">我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</a></p></div>
</body>
</html>

3.制作图5.40所示的淘宝女装分类页面、页面要求如下。
>使用无序列表等HTML标签有语义化的编辑页面。
>女装各分类名称前的图片使用背景图片的方式实现，标题字体大小为18px，加相显示。
分类内容字体大小为12px，超链接文本字体颜色为黑色，无下划线。当鼠标移至超链接文
本上时字体颜色为橙色（#F60），并且显示下划线。
>使用外部样式表创建页面样式。

>页面中其他的效果样式见提供的作业素材中的页面效果图。

div{font-size: 12px;}
h1{font-size: 18px;font-weight: bolder; vertical-align: middle;text-indent: 1.4em}
ul li{list-style-type: none;}
a{color: black;text-decoration: none
}
a:hover{color: #F60;text-decoration: underline;
}
ul li:first-of-type h1{background: url("../ClassHomework/images/Homework5/dress01.png") no-repeat;background-size: contain;
}
ul li:nth-of-type(2) h1{background: url("../ClassHomework/images/Homework5/dress02.png") no-repeat;background-size: contain;
}
ul li:nth-of-type(3) h1{background: url("../ClassHomework/images/Homework5/dress03.png") no-repeat;background-size: contain;
}
ul li:nth-of-type(4) h1{background: url("../ClassHomework/images/Homework5/dress04.png") no-repeat;background-size: contain;
}
ul li:nth-of-type(5) h1{background: url("../ClassHomework/images/Homework5/dress05.png") no-repeat;background-size: contain;
}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>淘宝女装分类页面</title><link href="../CSSFile/Homework5.css" rel="stylesheet" type="text/css">
</head>
<body><div><ul><li><h1>夏季流行</h1><hr/><a href="#">夏季新品</a><a href="#">雪纺裙</a><a href="#">短袖T</a><a href="#">铅笔裤</a><a href="#">短裤</a><a href="#">短袖衬衫</a><a href="#">小脚牛仔裤</a><a href="#">开衫</a><a href="#">蕾丝/雪纺衫</a><a href="#">韩版外套</a><a href="#">小西装</a><a href="#">中长款裙</a></li><li><h1>上装</h1><hr/><a href="#">T恤</a><a href="#">衬衫</a><a href="#">针织衫</a><a href="#">长袖T</a><a href="#">韩版T</a><a href="#">情侣衫</a><a href="#">雪纺衬衫</a><a href="#">韩版衬衫</a><a href="#">防晒衣</a><a href="#">休闲套装</a><a href="#">卫衣</a><a href="#">背心/吊带</a></li><li><h1>裙子</h1><hr/><a href="#">连衣裙</a><a href="#">半身裙</a><a href="#">长裙</a><a href="#">短袖裙</a><a href="#">蕾丝连衣裙</a><a href="#">长袖裙</a><a href="#">无袖/背心裙</a><a href="#">A字裙</a><a href="#">牛仔裙</a><a href="#">半身中长裙</a><a href="#">半身短裙</a><a href="#">包臀裙</a></li><li><h1>裤子</h1><hr/><a href="#">裤子</a><a href="#">休闲裤</a><a href="#">牛仔裤</a><a href="#">打底裤</a><a href="#">长裤</a><a href="#">哈伦裤</a><a href="#">阔腿裤</a><a href="#">短裤/热裤</a><a href="#">连体裤</a><a href="#">七/九分裤</a><a href="#">牛仔短裤</a><a href="#">西装裤</a></li><li><h1>其他女装</h1><hr/><a href="#">胖M装</a><a href="#">中老年</a><a href="#">婚纱</a><a href="#">礼服</a><a href="#">旗袍</a><a href="#">夜店</a><a href="#">舞台装</a><a href="#">唐装</a><a href="#">职业装</a><a href="#">全球购</a><a href="#">羊绒衫</a><a href="#">毛衣</a><a href="#">呢大衣</a><a href="#">羽绒服</a><a href="#">真皮皮衣</a></li></ul></div>
</body>
</html>

HTML5和CSS3开发第五章课后作业相关推荐

慕课软件质量保证与测试(第五章.课后作业)
慕课金陵科技学院.软件质量保证与测试.第五章.软件测试过程.课后作业 0 目录 5 软件测试过程 5.7 课后作业 5.7.1 课堂重点 5.7.2 测试与作业 6 下一章 0 目录 5 软件测试过程 ...
Vue.js前端开发实践第一章课后作业
课后习题一.填空题 1. Vue是一套构建用户界面的渐进式框架. 2. MVVM主要包含3个部分,分别是Model. View和ViewModel. 3. Vue 中通过refs属性获取相应DOM元 ...
python第五章课后作业_python 入门到实践第五章课后练习
原博文 2020-06-19 11:05 − users = ['admin','alex','eric','crystol','joji']#创建一个列表for i in users:#遍历整个列表 ...
面向对象第五章课后作业
1.编码创建一个打印类Printer,定义抽象方法print():创建两个子类,即针式打印机类DotMatrixPrinter和喷墨打印机类LnkpetPrinter,并在各自类中重写方法print( ...
使用HTML5和CSS3开发电子商务网站第一章HTLM5基础课后作业
使用HTML5和CSS3开发电子商务网站第一章HTLM5基础课后作业第三题,制作聚美优品常见问题页面. <!DOCTYPE html> <html lang="en&qu ...
用html5做一个介绍自己家乡的页面_（近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备...
作者 | Jeskson来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变,变 ...
c语言定义int 输出4386,大学C语言第五章课后习题参考程序
考试,二级C语言备考第五章课后习题参考程序 5.1 编写程序,求100-2000之间所有3的倍数之和,当和大于1000时结束. (参考答案:900) #include int main() { in ...
Android深度探索--HAL与驱动开发----第五章读书笔记
第五章主要学习了搭建S3C6410开发板的测试环境.首先要了解到S3C6410是一款低功耗.高性价比的RISC处理器它是基于ARMI1内核,广泛应用于移动电话和通用处理等领域. 开发板从技术上说与我们 ...
Html5和CSS3开发指南学习
Html5和CSS3开发指南学习 1. 为什么学习HTML5 跨平台运行--PC/手机/Pad跨平台使用硬件要求低 flash之外的选择,尤其是手机端开发 2. HTML介绍 2-1 什么是HTML ...

HTML5和CSS3开发第五章课后作业

HTML5和CSS3开发第五章课后作业相关推荐

最新文章

热门文章