1.使用font-family属性，同时设置英文字体和中文字体时需要注意什么问题?
2.在CSS中，常用的背景属性有哪几个？它们的作用是什么？
3.制作北大青鸟课程介绍页面，页面要求如下：
.使用<div>,<p>,<span>等 标签编辑页面，页面整体背景颜色使用线性渐变。
.课程特色字体颜色为绿色（#5C9815）,设计理念字体颜色为橙色（#F26522）
.课程特色和设计理念每行开头带背景颜色的字体为白色，使用结构伪类选择器元素。
…使用外部式表创建页面样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>北大青鸟课程介绍页面</title>
<style>
.f{
color: #5C9815;
}
.s{
color: #F26522;
}
span ,a{
color: white;
}
span:nth-of-type(1){background: red;}
span:nth-of-type(2){background: orange;}
span:nth-of-type(3){background:cadetblue;}
span:nth-of-type(4){background:darkcyan;}
span:nth-of-type(5){background: blue;}
a:nth-of-type(1){background:brown;}
a:nth-of-type(2){background:royalblue;}
a:nth-of-type(3){background:red;}
a:nth-of-type(4){background:fuchsia;}
a:nth-of-type(5){background:darkorchid;}
a:nth-of-type(6){background:darkorchid;}
div{
background: linear-gradient(to bottom,#ECECEC,#FFFFED);
background: -webkit-linear-gradient(to bottom,#ECECEC,#FFFFED);
width: 600px;
}
</style>
</head>
<body>
<div>
<img src="title.gif"/><br/>
<img src="img_01.png"/><br/>
<p class="f" >
<span>逆向课程设计：</span> 以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致<br/>
<span> 模拟学员学习路线：</span> 强调难点和复杂技能点的反复训练，力求学习效果和学习体验<br/>
<span>互联网作为教学环境：</span>学员的日常教学和训练均在互联网线上进行<br/>
<span>学习挡板监控网上学习效果：</span> 每个学习阶段设置线上线下测试，严密监控学习效<br/>
<span>真实开发项目经验积累：</span> 采用专业互联网企业提供的真实项目作为模拟开发<br/>
</p>
<img src="img_02.png"/>
<p class="s">
<a>【实用性】——</a> 以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术<br/>
<a>【权威性】——</a> 与来自百度等知名企业的专家联合开发<br/>
<a>【专业性】——</a> >引进业内资深人才和典型行业开发项目<br/>
<a>【真实性】——</a> 在互联网真实环境下进行教学和训练<br/>
<a>【易学性】——</a> 在线培训模式，24小时专家在线解答疑难问题<br/>
<a>【完整性】——</a> 利用SNS虚拟社区：学习、人脉双丰收<br/>
</p>
</div>
</body>
</html>
4.制作席慕蓉的《初相遇》
页面总宽度为400px，整体背录颜色线性渐变（#CAEFFE#FFFED)
使用
标签排版文本标题，字体大小为18px，黑色文字阴影。
使用
标签排版文本正文，首行缩进为2em.行高为22px，
首段第一个“美”字，字体大小为180x，加相显示。黑色和白色文字阴影具体方向参考
素材效果图。第二段中的“胸怀中满溢…在我眼前”字体风格为倾斜。颜色为蓝色，字
体大小为16px，正文其余文字大小为12px.
最后一段文字带下划线。
使用外部样式表创建页面样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background: linear-gradient(to bottom,#CAEFFE,#FFFFED);
background: -webkit-linear-gradient(to bottom,#CAEFFE,#FFFFED);
width: 400px;
}
h1{
font-size: 18px;
text-shadow: black;
text-align: center;
}
p{
line-height: 22px;
text-indent: 2em;
font-size: 12px;
}
span{
font-size: 18px;
font-weight: bold;
text-shadow: white;
}
a{
font-style: italic;
color: blue;
font-size: 16px;
}
.m{
text-decoration: underline;
}
.x{
font-size: 12px;
}
</style>
</head>
<body>
<div>
<h1> 初相遇 <span class="x">文/席慕容</span></h1>
<p><span>美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。</p>
<p> 我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。<a>胸怀中满溢着幸福，只因你就在我眼前</a>，对我微笑，一如当年。</p>
<p class="m"> 我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</p>
</p>
</div>
</body>
5…制作图5.40所示的淘宝女装分类页面、页面要求如下。
使用无序列表等HTML标签有语义化的编辑页面。
女装各分类名称前的图片使用背景图片的方式实现，标题字体大小为18px，加相显示。
分类内容字体大小为12px，超链接文本字体颜色为黑色，无下划线。当鼠标移至超链接文
本上时字体颜色为橙色（#F60），并且显示下划线。
使用外部样式表创建页面样式。
页面中其他的效果样式见提供的作业素材中的页面效果图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
font-size: 18px;
font-weight: bold;
}
p{
font-size: 12px;
}
a{color: black;text-decoration: none;}
a:hover{color: #f60;text-decoration: underline}
</style>
</head>
<body>
<ul>
<p><img src="dress01.png"/><strong class="active">夏季流行</strong></p>
<hr/>
<p> <a href="#" target="_blank">夏季新品</a> <a href="#"target="_blank">雪纺裙</a> <a href="#" target="_blank">
铅笔裤</a> <a href="#" target="_blank">短裤</a> <a href="#" target="_blank">短袖衬衫</a>
<a href="#"target="_blank">小脚牛仔裤</a> <a href="#" target="_blank">开衫</a> <a href="#" target="_blank">
蕾丝/雪纺衫</a> <a href="#"target="_blank">韩版外套</a> <a href="#" target="_blank">小西装</a>
<a href="#" target="_blank">中长款裙</a></p>
<p><img src="dress02.png" /><strong class="active">上装</strong></p>
<hr/>
<p><a href="#" target="_blank">T桖</a> <a href="#" target="_blank">衬衫</a> <a href="#" target="_blank">针织衫</a>
<a href="#" target="_blank">长袖</a>T <a href="#" target="_blank">韩版</a> <a href="#" target="_blank">
雪纺衬衫</a> <a href="#" target="_blank">韩版衬衫</a> <a href="#" target="_blank">防晒衣</a>
<a href="#" target="_blank">休闲套装</a> <a href="#" target="_blank">卫衣</a> <a href="#" target="_blank">
背心/吊带</a></p>
<p><img src="dress03.png"/><strong class="active">裙子</strong></p>
<hr/>
<p><a href="#" target="_blank">连衣裙</a> <a href="#" target="_blank">半身裙</a> <a href="#"target="_blank">长裙</a>
<a href="#"target="_blank">短袖裙</a> <a href="#" target="_blank">蕾丝连衣裙</a> <a href="#" target="_blank">
长袖裙</a> <a href="#"target="_blank">无袖/背心裙</a> <a href="#">A字裙</a> <a href="#" target="_blank">
牛仔裙</a> <a href="#" target="_blank">半身中长裙</a> <a href="#"target="_blank">半身短裙</a>
<a href="#" target="_blank">包臀裙</a></p>
<p><img src="dress04.png"/><strong class="active">裤子</strong></p>
<hr/>
<p><a href="#"target="_blank">裤子</a> <a href="#"target="_blank">休闲裤</a> <a href="#"target="_blank">牛仔裤</a>
<a href="#" target="_blank">打底裤</a> <a href="#" target="_blank">长裤</a> <a href="#" target="_blank">
哈伦裤</a> <a href="#" target="_blank">阔腿裤</a> <a href="#" target="_blank">短裤/热裤</a>
<a href="#" target="_blank">连体裤</a> <a href="#" target="_blank">七/九分裤</a> <a href="#" target="_blank">
牛仔短裤</a> <a href="#" target="_blank">西装裤</a></p>
<p><img src="dress05.png"/><strong class="active">其他女装</strong></p>
<hr/>
<p><a href="#" target="_blank">胖M装</a> <a href="#" target="_blank">中老年</a> <a href="#" target="_blank">婚纱</a>
<a href="#" target="_blank">礼服</a> <a href="#" target="_blank">旗袍</a> <a href="#"target="_blank">
夜店</a> <a href="#" target="_blank">舞台装</a> <a href="#"target="_blank">唐装</a>
<a href="#" target="_blank">职业装</a> <a href="#" target="_blank">全球购</a> <a href="#" target="_blank">
羊绒衫</a> <a href="#" target="_blank">毛衣</a> <a href="#" target="_blank">呢大衣</a>
<a href="#" target="_blank">羽绒服</a> <a href="#"target="_blank">真皮皮衣</a></p>
</ul>
</body>
</html>
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
