第五章作业

一简答题
1.使用font-fanmily属性，同时设置英文字体和中文字体时需要注意什么问题？
答：把英文字体写在前面，中文的写在后面
2.在CSS中，常用的背景属性有哪几个？他们的作用是什么？
答：background:#fff url(‘sss.jpg’) no-rerepeat;
颜色，背景图片路径，不循环
还有一个background-size：背景图片的大小
3.制作北大青鸟课程介绍页面（页面效果参见提供的上机练习素材中的页面效果图），页面要求如下。

使用《div》，《p》，《span》等标签编辑页面，页面整体背景颜色使用线性渐变（#ECECEC，#FFFFFD）。
课程特色字体颜色为绿色（#5C9815），设计理念字体为橙色（#F26522）。
课程特色和设计理念每行开头带背景颜色的字体为白色，背景颜色从提供作业素材的页面中获取，使用结构伪类选择器元素。
使用外部样式表创建页面样式。
/整体设定/
#whole{
width: 600px;
background-color: #eeeeee;
background: linear-gradient(to bottom,#ECECEC,#FFFFED);
}
/id选择器/
#whole span{
color: #ffffff;
}
/改变字体背景/
.one{
line-height:30px;
color: #5C9815;
}
.one span:nth-of-type(1) {
background-color:#005952;
}
.one span:nth-of-type(2) {
background-color:#007236;
}
.one span:nth-of-type(3) {
background-color:#008bbf;
}
.one span:nth-of-type(4) {
background-color:#0066b3;
}
.one span:nth-of-type(5){
background-color:#002561;
}
/id选择器/
.two{
line-height:30px;
color: #F26522;
}
/改变字体背景/
.two span:nth-of-type(1) {
background-color:#f36f21;
}
.two span:nth-of-type(2) {
background-color:#bb131a;
}
.two span:nth-of-type(3){
background-color:#d73765;
}
.two span:nth-of-type(4) {
background-color:#a70532;
}
.two span:nth-of-type(5) {
background-color:#553171;
}
.two span:nth-of-type(6){
background-color:#4f1268;
}

北大青鸟课程介绍页面

逆向课程设计： 以企业需求决定课程设计内容，确保训练内容及深度和企业需求
一致
模拟学员学习路线： 强调难点和复杂技能点的反复训练，力求学习效果和学习体
验
互联网作为教学环境： 学员的日常教学和训练均在互联网线上进行
学习挡板监控网上学习效果： 每个学习阶段设置线上线下测试，严密监控学习效
果
真实开发项目经验积累： 采用专业互联网企业提供的真实项目作为模拟开发

【实用性】—— 以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％
的技术
【权威性】—— 与来自百度等知名企业的专家联合开发
【专业性】—— 引进业内资深人才和典型行业开发项目
【真实性】—— 在互联网真实环境下进行教学和训练
【易学性】—— 在线培训模式，24小时专家在线解答疑难问题
【完整性】—— 利用SNS虚拟社区：学习、人脉双丰收

4.制作席慕容的诗《初相遇》（页面效果参见提供的上机练习素材中的页面效果图），页面要求如下。

页面总宽度为400px，整体背景颜色线性渐变（#CAEFFE，#FFFFED）；
使用《h1》标签排版文字标题，字体大小为18px，黑色文字阴影。
使用《p》标签排版文字正文，首行缩进为2em，行高为22px。
首段第一个“美”字，字体大小为18px，加粗显示，黑色和白色文字阴影，具体方向参考素材效果图。第二段中的“胸怀中满溢······在我眼前”字体风格倾斜，颜色为蓝色，字体大小为16px。正文其余文字大小为12px。
最后一段文字带下划线。
使用外部样式表创建页面样式。
页面中的字体颜色从提供作业素材的页面效果图中获取。
/设定整体/
body{
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif, “宋体”;
width: 400px;
height: 400px;
}
/设置主题部分/
#whole{
background: 400px;
background: linear-gradient(to bottom,#CAEFFE,#FFFFED);
}
/设置标题/
h1{
font-size: 18px;
color: #0d7dac;
text-align: center;
text-shadow: black 1px 1px 1px;
}
/设置特定字体/
span{
font-size: 12px;
color: #999999;
font-weight: normal;
}
/设置p标签的样式/
p{
text-indent: 2em;
line-height: 22px;
}
.one{
font-size: 18px;
color:violet;
font-weight: bold;
text-shadow: white 2px 2px 2px,black 2px 2px 2px,white -2px -2px 2px;
}
.two{
font-size: 18px;
color: #4c67f4;
font-style: oblique;
}
.three{
color: #339900;
text-decoration: underline;
}

初相遇--席慕容

初相遇 文/席慕容

美 丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到
的时刻里出现。

我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解
释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感
激。 胸怀中满溢着幸福，只因你就在我眼前 ，对我微笑，一如
当年。

我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落
落英缤纷，好像你我才初相遇。

5.制作淘宝女装分类页面（页面效果参见提供的上机练习素材中的页面效果图），页面要求如下。

使用无序列表等HTML标签有语义化的编辑页面。
女装各分类名称前的图片使用背景图片的方式实现，标题字体大小为18px，加粗显示。
分类内容字体大小为12px，超链接文本字体颜色为黑色，无下划线，当鼠标移至超链接文本字体上时字体颜色为橙色（#F60），并且显示下划线。
使用外部样式表创建页面样式。
页面中其他的效果样式见提供的作业素材中的页面效果图。
/设置标题/
h2{
font-size: 18px;
font-weight: bold;
}
/引用图片当背景/
.one{
background: url(…/Semester1book3DJ5/dress01.png) 0px 0px no-repeat;
}
.two{
background: url(…/Semester1book3DJ5/dress02.png) 0px 0px no-repeat;
}
.three{
background: url(…/Semester1book3DJ5/dress03.png) 0px 0px no-repeat;
}
.four{
background: url(…/Semester1book3DJ5/dress04.png) 0px 0px no-repeat;
}
.five{
background: url(…/Semester1book3DJ5/dress05.png) 0px 0px no-repeat;
}
/设置p标签样式/
p{
font-size: 12px;
}
/设置悬停时样式/
a:hover{
text-decoration: underline;
color: #F60;
}

淘宝女装分类页面

•           夏季流行

  ---

  夏季新品 雪纺裙 短袖T 铅笔裤 短裤 短袖衬衫 小脚牛仔裤
  开衫 蕾丝/雪纺衫 韩版外套 小西装 中长款裙

•           上装

  ---

  T恤 衬衫 针织衫 长袖T 韩版T 情侣衫 雪纺衬衫 韩版衬衫
  防晒衣 休闲套装 卫衣 背心/吊带

•           裙子

  ---

  连衣裙 半身裙 长裙 短袖裙 蕾丝连衣裙 长袖裙 无袖/背心
  裙 A字裙 牛仔裙 半身中长裙 半身短裙 包臀裙

•           裤子

  ---

  裤子 休闲裤 牛仔裤 打底裤 长裤 哈伦裤 阔腿裤 短裤/热
  裤 连体裤 七/九分裤 牛仔短裤 西装裤

•           其他女装

  ---

  胖M装 中老年 婚纱 礼服 旗袍 夜店 舞台装 唐装 职业装
  全球购 羊绒衫 毛衣 呢大衣 羽绒服 真皮皮衣