第五章
1.使用font-family属性,同时设置英文字体和中文字体需要注意什么问题?
首先设置英文字体 再设置中文字体
2.在css中,常用的背景属性有哪几个?他们的作用是什么?
color image 背景颜色和背景图像
3.制作所示课程介绍页面,要求如下:
使用div,p,span等标签编辑页面,页面整体背景颜色使用线性渐变(#ECECEC,#FFFFED)。
课程特色字体颜色为绿色(#5C9815),设计理念字体颜色为橙色(#F26522)。
课程特色和课程理念每行开头带背景颜色的字体为白色,使用结构伪类选择器元素。
使用外部样式表创建页面样式。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>北大青鸟课程介绍页面</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="android">
<h2><img src="test/title.gif" height="67" width="598"/></h2>
<h3><img src="test/img_01.png" height="60" width="288"/></h3>
<div class="course">
<a>逆向课程设计:</a> 以企业需求决定课程设计内容,确保训练内容及深度和企业需求一致<br/>
<a>模拟学员学习路线:</a> 强调难点和复杂技能点的反复训练,力求学习效果和学习体验<br/>
<a>互联网作为教学环境: </a> 学员的日常教学和训练均在互联网线上进行<br/>
<a>学习挡板监控网上学习效果:</a> 每个学习阶段设置线上线下测试,严密监控学习效果<br/>
<a>真实开发项目经验积累:</a> 采用专业互联网企业提供的真实项目作为模拟开发
</div>
<h3><img src="test/img_02.png" height="65" width="329"/></h3>
<div class="design">
<a>【实用性】――</a> 以就业岗位需求为导向,重点讲解企业80%的时间在使用的20%的技术<br/>
<a>【权威性】――</a> 与来自百度等知名企业的专家联合开发<br/>
<a>【专业性】――</a> 引进业内资深人才和典型行业开发项目<br/>
<a>【真实性】――</a> 在互联网真实环境下进行教学和训练<br/>
<a>【易学性】――</a> 在线培训模式,24小时专家在线解答疑难问题<br/>
<a>【完整性】――</a> 利用SNS虚拟社区:学习、人脉双丰收
</div>
</div>
</body>
</html>
《css》
#android {
width:600px;
background: linear-gradient(to bottom, #ececec,#FFFFED);
}
#android a {
color:#ffffff;
}
.course {
line-height:30px;
color:#5c9815;
}
.course a:nth-of-type(1) {
background-color: #005959;
}
.course a:nth-of-type(2) {
background-color:#007230;
}
.course a:nth-of-type(3) {
background-color:#008bbf;
}
.course a:nth-of-type(4) {
background-color:#0066b9;
}
.course a:nth-of-type(5){
background-color:#002569;
}
.design {
line-height:30px;
color:#f26522;
}
.design a:nth-of-type(1) {
background-color:#f36f29;
}
.design a:nth-of-type(2) {
background-color:#bb131a;
}
.design a:nth-of-type(3){
background-color:#d73760;
}
.design a:nth-of-type(4) {
background-color:#a70539;
}
.design a:nth-of-type(5) {
background-color:#553179;
}
.design a:nth-of-type(6){
background-color:#4f1260;
}
4.制作图所示的席慕蓉的诗《初相遇》要求如下:
页面总宽度400px,整体背景颜色线性渐变(#CAEFFE,#FFFFED)
使用h1标签排版文本标题,字体大小为18px,黑色文字阴影。
使用p标签排版文本正文,首行缩进2em,行高为22px。
首行第一个“美”字,字体大小为18px,加粗显示,黑色和白色文字阴影,第二段中的“胸怀中……在我眼前”字体风格为倾斜,颜色为蓝色,字体大小为16px。正文其他文字大小为12px。
最后一段文字带下划线。
使用外部样式表创建页面样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test2.css">
</head>
<body>
<div id="android">
<h1>初相遇 <a> 文/席慕容</a></h1>
<p><b>美</b> 丽的梦和美丽的诗一样,都是可遇而不可求的,常常在最没能料到
的时刻里出现。</p>
<p> 我喜欢那样的梦,在梦里,一切都可以重新开始,一切都可以慢慢解
释,心里甚至还能感觉到,所有被浪费的时光竟然都能重回时的狂喜与感
激。<c>胸怀中满溢着幸福,只因你就在我眼前</c> , 对我微笑,一
如当年。</p>
<p class="d">我喜欢那样的梦,明明知道你已为我跋涉千里,却又觉得芳草鲜美,落
落英缤纷,好像你我才初相遇。</p>
</div>
</body>
</html>
《css》
h1{
font-size: 18px;
color: #0d7dac;
text-align: center;
text-shadow: #000 1px 1px 1px;
}
a{
font-size: 12px;
color: #a1a4a9;
}
b{
font-size: 16px;
font-weight: bold;
color: #6e17f0;
text-shadow: #fafafa 1px 1px 1px;
}
c{
font-size: 16px;
font-weight: bold;
color: #4c67f4;
font-style:italic;
}
.d{
color: #339900;
text-decoration: underline;
}
p{
text-indent: 2em;
font-size: 12px;
line-height: 22px;
}
#android {
width: 400px;
background: linear-gradient(to bottom, #aee4ec, #e7ffcc);
}
5.制作图所示的淘宝女装分类页面,要求如下:
使用无序列表等HTML标签有语义化的编辑页面
女装内容字体大小为12px,超链接文本字体颜色为黑色,无下划线,当鼠标移到超链接文本上时字体颜色变为橙色(#F60),并且显示下划线。
使用外部样式表创建页面样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test3.css">
</head>
<body id="dress">
<ul>
<li>
<h3 class="a01"> 夏季流行</h3>
<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>
</li>
<li>
<h3 class="a02">上装</h3>
<hr>
<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>
<h3 class="a03"> 裙子</h3>
<hr>
<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>
<h3 class="a04">裤子</h3>
<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>
</li>
<li>
<h3 class="a05">其他女装</h3>
<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>
</body>
</html>
《css》
.a01{
background: url(test3/dress01.png) 0px 0px no-repeat;
}
.a02{
background: url(test3/dress02.png) 0px 0px no-repeat;
}
.a03{
background: url(test3/dress03.png) 0px 0px no-repeat;
}
.a04{
background: url(test3/dress04.png) 0px 0px no-repeat;
}
.a05{
background: url(test3/dress05.png) 0px 0px no-repeat;
}
#dress {
width: 320px;
line-height: 25px;
font-size: 12px;
}
h3 {
font-size: 16px;
text-indent: 40px;
height: 40px;
line-height: 40px;
}
li{
list-style: none;
}
a {
color: #000;
text-decoration: none;
}