第五章作业
1.使用font—family属性，同时设置英文字体和中文字体时需要注意什么问题？
注意：先写英文字体，再写中文字体，尽可能设置计算机中常用的字体。
2.在CSS中，常用的背景属性用哪几个？它们的作用是什么？
（1）background-color设置背景颜色。
（2）background-image设置背景图像。
（3）background-repeat和background-position通常和背景图像一起使用，分别设置背景图像的重复方式和定位。
3.制作北大青鸟课程介绍页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>北大青鸟课程介绍页面</title>
<style>
div{
width: 600px;
background-color:#eeeeee;
background: linear-gradient(to bottom,#ECECEC,FFFFED);
line-height: 30px;
}
.erc{
color: #5c9815;
}
.erc1{
color: #f26522;
}
strong{
color: green;
}
p span:nth-of-type:(1){
background-color: #005952;
}
p a:nth-of-type:(2){
background-color: #007236;
}
p a:nth-of-type:(3){
background-color: #008bbf;
}
p a:nth-of-type:(4){
background-color: #0066b3;
}
p a:nth-of-type:(5){
background-color: #002561;
}
p a:nth-of-type(1){
background-color: #f36f21;
}
p a:nth-of-type(2){
background-color: #bb131a;
}
p a:nth-of-type(3){
background-color: #d73765;
}
p a:nth-of-type(4){
background-color: #a70532;
}
p a:nth-of-type(5){
background-color: #553171;
}
p a:nth-of-type(6){
background-color: #4f1268;
}
</style>
</head>
<body>
<div>
<img src="img/title.gif" />
<img src="img/img_01.png"/>
<p>
<a>逆向课程设计:</a><strong>以企业需求决定课程设计内容，确保训练内容及深度和企业需求
一致</strong><br />
<a>模拟学员学习路线:</a><strong>强调难点和复杂技能点的反复训练，力求学习效果和学习体验</strong><br />
<a>互联网作为教学环境:</a><strong>学员的日常教学和训练均在互联网线上进行</strong><br />
<a>学习挡板监控网上学习效果:</a><strong>每个学习阶段设置线上线下测试，严密监控学习效果</strong><br />
<a>真实开发项目经验积累:</a><strong>采用专业互联网企业提供的真实项目作为模拟开发</strong><br />
</p>
<br />
<img src="img/img_02.png" />
<br />
<p>
<a>【实用性】——</a><strong>以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术</strong><br />
<a>【权威性】——</a><strong>与来自百度等知名企业的专家联合开发</strong><br />
<a>【专业性】——</a><strong>引进业内资深人才和典型行业开发项目</strong><br />
<a>【真实性】——</a><strong>在互联网真实环境下进行教学和训练</strong><br />
<a>【易学性】—— </a><strong>在线培训模式，24小时专家在线解答疑难问题</strong><br />
<a>【完整性】——</a><strong>利用SNS虚拟社区：学习、人脉双丰收</strong><br />
</p>
</div>
</body>
</html>
4制作席慕容的诗《初相遇》。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初相遇--席慕容</title>
<style>
div{
width: 400px;
background:linear-gradient(to left,#CAEFFE,#FFFFED);
}
body{
text-align: center;
}
h1{
font-size: 18px;
text-shadow: black;
}
p{
text-indent: 2em;
line-height: 22px;
font-size: 12px;
}
span{
font-size: 18px;
font-weight: bold;
text-shadow: 2px 2px 4px;
}
.m{
font-size: 12px;
}
a{
font-style: inherit;
font-size: 16px;
color: blue;
}
.b{
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<h1>初相遇 <span class="m">文/席慕容</span></h1>
<p>
<span>美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。
</p>
<p>
我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。<a>胸怀中满溢着幸福，只因你就在我眼前，对我微笑，一如当年。</a>
</p>
<p class="b">
我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。
</p>
</div>
</body>
</html>
5.制作淘宝女装分类页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝女装分类页面</title>
<style>
.a{
font-size: 18px;
font-weight: bolder;
}
img,span{
vertical-align: middle;
}
a:hover{
color:#b46210;
font-size: 12px;
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<div>
<img src="img/dress01.png" /><span class="a">夏季流行</span>
</div>
<div>
<hr />
</div>
<div>
<p><a>夏季新品</a> <a>雪纺裙雪纺裙</a> <a> 短袖T</a> <a>铅笔裤</a> <a>短裤 短袖衬衫</a> </p>
</div>
<div>
<img src="img/dress02.png" /><span class="a">上装</span>
</div>
<div>
<hr />
</div>
<div>
<p><a>T恤</a> <a>衬衫</a> <a> 针织衫</a> <a>长袖T</a> <a>T 韩版T 衫</a> </p>
</div>
<div>
<img src="img/dress03.png" /><span class="a">裙子</span>
</div>
<div>
<hr />
</div>
<div>
<p><a>连衣裙 </a> <a>半身裙</a> <a> 长裙</a> <a>短袖裙</a> <a>蕾丝连衣裙</a> </p>
</div>
<div>
<img src="img/dress04.png" /><span class="a">大裤子</span>
</div>
<hr />
<p><a>裤子 </a> <a>休闲裤</a> <a> 牛仔裤 </a> <a>打底裤</a> <a>短裤/热裤</a> </p>
</div>
</body>
</html>