课后作业
1.使用font-family属性,同时设置英文字体和中文字体时需要注意什么问题？
英文字体写前面，中文字体写后面
2.在CSS中，常见的背景属性有哪些？他们的作用是什么？
background:#fff url('sss.jpg') no-rerepeat;
颜色，背景图片路径，不循环
background-color:#fff;
背景颜色
background-size:背景图片大小;
3.制作北大青鸟课程介绍页面
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>北大青鸟课程介绍页面</title>
<link rel="stylesheet" type="text/css" href="css/渐变.css" />
</head>
<body>
<div>
<h1><img src="img/title.gif"/></h1>
<img src="img/img_01.png" />
<p>
<span class="a1">逆向课程设计：</span>
<span class="color1">以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致</span>
</p>
<p>
<span class="a2">模拟学员学习路线：</span>
<span class="color1">强调难点和复杂技能点的反复训练，力求学习效果和学习体验</span>
</p>
<p>
<span class="a3">互联网作为教学环境：</span> <span class="color1">学员的日常教学和训练均在互联网线上进行</span>
</p>
<p>
<span class="a4">学习挡板监控网上学习效果：</span>
<span class="color1">每个学习阶段设置线上线下测试，严密监控学习效果</span>
</p>
<p>
<span class="a5">真实开发项目经验积累：</span>
<span class="color1">采用专业互联网企业提供的真实项目作为模拟开发</span>
</p>
<img src="img/img_02.png" />
<p>
<span class="a6">【实用性】—— </span>
<span class="color2">以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术</span>
</p>
<p>
<span class="a7">【权威性】—— </span>
<span class="color2">与来自百度等知名企业的专家联合开发</span>
</p>
<p>
<span class="a8">【专业性】—— </span>
<span class="color2">引进业内资深人才和典型行业开发项目</span>
</p>
<p>
<span class="a9">【真实性】—— </span>
<span class="color2">在互联网真实环境下进行教学和训练</span>
</p>
<p>
<span class="a10">【易学性】—— </span>`在这里插入代码片`
<span class="color2">在线培训模式，24小时专家在线解答疑难问题</span>
</p>
<p>
<span class="a11">【完整性】—— </span>
<span class="color2">利用SNS虚拟社区：学习、人脉双丰收</span>
</P>
</body>
</html>
CSS样式:
div {
width: 600px;
background: linear-gradient(to bottom, #ECECEC, #FFFFED);
}
.color1 {
color: #5C9818
}
.color2 {
color: #F26522;
}
.a1 {
color: white;
background: #005952;
}
.a2 {
color: white;
background: #007236;
}
.a3 {
color: white;
background: #008BBF;
}
.a4 {
color: white;
background: #0066B3;
}
.a5 {
color: white;
background: #1d0987;
}
.a6 {
color: white;
background: #F36F21;
}
.a7 {
color: white;
background: #BB131A;
}
.a8 {
color: white;
background: #D73765;
}
.a9 {
color: white;
background: #A70532;
}
.a10 {
color: white;
background: #553171;
}
.a11 {
color: white;
background: #4F1268;
}
4.制作席慕容的诗《初相遇》
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初相遇--席慕容</title>
<link rel="stylesheet" type="text/css" href="css/渐变2.css" />
</head>
<body>
<div>
<h1>初相遇<span> 文/席慕容</span></h1>
<p><span>美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。</p>
<p>我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感
激。<em>胸怀中满溢着幸福，只因你就在我眼前</em>，对我微笑，一如当年。</p>
<p>
<a>我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</a>
</p>
</div>
</body>
</html>
CSS样式:
div {
width: 400px;
background:-webkit-linear-gradient(#CAEFFE,#FFFFED);
}
h1{
text-align: center;
text-shadow: 0.8px 0.8px 0.8px #000000;
font-size: 18PX ;
color: #0D7DAC;
}
h1 span{
font-size: 12px;
color: #929798;
text-shadow: black 1px -1px;
}
div p:first-of-type span{
font-size: 18px;
color: #7C00B8;
font-weight: bolder;
}
em{
font-size: 16px;
color: #2E65FF;
}
p{
font-size: 12px;
text-indent: 2em;
}
a{
color: green;
text-decoration: underline;
}
5.制作淘宝女装分类页面
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝女装大佬页面</title>
<link rel="stylesheet" type="text/css" href="css/CSS.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>
CSS样式:
div {
font-size:14px ;
}
ul li {
width: 448px;
list-style-type: none;
}
h1 {
font-size: 18px;
font-weight: bolder;
vertical-align: middle;
text-indent: 1.5em
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: #F60;
text-decoration: underline;
}
ul li:first-of-type h1 {
background: url(../img/dress01.png)no-repeat;
background-size: contain;
}
ul li:nth-of-type(2) h1{
background: url(../img/dress02.png)no-repeat;
background-size:contain;
}
ul li:nth-of-type(3) h1{
background: url(../img/dress03.png)no-repeat;
background-size: contain;
}
ul li:nth-of-type(4) h1{
background: url(../img/dress04.png)no-repeat;
background-size: contain;
}
ul li:nth-of-type(5) h1{
background: url(../img/dress05.png)no-repeat;
background-size: contain;
}