3.
.g3{
background: linear-gradient(#ececec,#ffffed);
width: 600px;
}
#g1{
color: #5c9815;
}
#g2{
color: #f26522;
}
span{
color: white;
}
#g1 p span:nth-of-type(1){
background-color:#808080;
}
#g1 p:nth-of-type(2) span{
background-color:#66FF00;
}
#g1 p:nth-of-type(3) span{
background-color:#0099FF;
}
#g1 p:nth-of-type(4) span{
background-color:#1A42E6;
}
#g1 p:nth-of-type(5) span{
background-color:#0A1A5C;
}
#g2 p span:nth-of-type(1){
background-color:#ffcc00;
}
#g2 p:nth-of-type(2) span{
background-color:red;
}
#g2 p:nth-of-type(3) span{
background-color:#F7B3C0;
}
#g2 p:nth-of-type(4) span{
background-color:#D65C75;
}
#g2 p:nth-of-type(5) span{
background-color:#D23AF9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>北大青鸟课程介绍页面</title>
<link href="sytle1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="g3">
<div id="g1">
<img src="title.gif"><br/>
<img src="img_01.png">
<p>
<span>逆向课程设计:</span> 以企业需求决定课程设计内容,确保训练内容及深度和企业需求一致
</p>
<p>
<span>模拟学员学习路线:</span> 强调难点和复杂技能点的反复训练,力求学习效果和学习体验
</p>
<p>
<span>互联网作为教学环境:</span> 学员的日常教学和训练均在互联网线上进行
</p>
<p>
<span>学习挡板监控网上学习效果:</span> 每个学习阶段设置线上线下测试,严密监控学习效果
</p>
<p>
<span>真实开发项目经验积累:</span> 采用专业互联网企业提供的真实项目作为模拟开发
</p>
</div>
<div id="g2">
<img src="img_02.png">
<p>
<span>【实用性】——</span> 以就业岗位需求为导向,重点讲解企业80%的时间在使用的20%的技术
</p>
<p>
<span>【权威性】——</span> 与来自百度等知名企业的专家联合开发
</p>
<p>
<span>【专业性】——</span> 引进业内资深人才和典型行业开发项目
</p>
<p>
<span>【真实性】——</span> 在互联网真实环境下进行教学和训练
</p>
<p>
<span>【易学性】——</span> 在线培训模式,24小时专家在线解答疑难问题
</p>
<p>
<span>【完整性】——</span> 利用SNS虚拟社区:学习、人脉双丰收
</p>
</div>
</div>
</body>
</html>
4.
div{
width: 400px;
background: linear-gradient(#caeffe,#FFFFED);
}
#g1{
color: #1a66b3;
font-size: 24px;
text-shadow:black 3px 3px 4px;
}
#g2{
color:gainsboro;
font-size: 18px;
text-shadow: black 3px 3px 4px;
}
h1{
text-align: center;
}
#g3{
color: #1f87cc;
font-size: 18px;
font-weight: bold;
text-shadow: #FFFFED 3px 3px 4px;
}
#g4{
font-style: italic;
color: blue;
font-size: 16px;
}
div p:nth-of-type(2){
font-size: 12px;
}
div p:nth-of-type(3){
text-decoration: underline;
color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初相遇--席慕容</title>
<link href="sytle2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<h1><span id="g1">初相遇</span>
<span id="g2">文/席慕容</span></h1>
<p><span id="g3">美</span>丽的梦和美丽的诗一样,都是可遇而不可求的,常常在最没能料到的时刻里出现。
</p>
<p>
我喜欢那样的梦,在梦里,一切都可以重新开始,一切都可以慢慢解释,心里甚至
还能感觉到,所有被浪费的时光竟然都能重回时的狂喜与感激。<span id="g4">胸怀中满溢着幸福,只因你就在我眼前</span>,对我微笑,一如当年。
</p>
<p>
我喜欢那样的梦,明明知道你已为我跋涉千里,却又觉得芳草鲜美,落落英缤纷,
好像你我才初相遇。
</p>
</div>
</body>
</html>
5.
h2{
font-size: 18px;
font-weight: bold;
text-indent: 2em;
}
a{
color: black;
font-size: 12px;
list-style: none;
}
li{
list-style-type: none;
}
li a{
text-decoration:none;
}
li a:hover{
text-decoration:underline;
color: #f60;
}
h2:nth-of-type(1){
background-image:url("dress01.png");
background-repeat: no-repeat;
}
h2:nth-of-type(2){
background-image:url("dress02.png");
background-repeat: no-repeat;
}
h2:nth-of-type(3){
background-image:url("dress03.png");
background-repeat: no-repeat;
}
h2:nth-of-type(4){
background-image:url("dress04.png");
background-repeat: no-repeat;
}
h2:nth-of-type(5){
background-image:url("dress05.png");
background-repeat: no-repeat;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝女装分类页面</title>
<link href="style3.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<h2>夏季流行</h2><hr/>
<li><a href="#">夏季新品</a> <a href="#">雪纺裙</a> <a href="#">短袖T </a><a href="#">铅笔裤 </a><a href="#">短裤</a> <a href="#">短袖衬衫 </a><a href="#">小脚牛仔裤</a></li>
<li><a href="#">开衫</a> <a href="#">蕾丝/雪纺衫</a> <a href="#">韩版外套</a> <a href="#">小西装</a> <a href="#">中长款裙</a> <a href="#">上装</a></li>
<h2>上装</h2><hr/>
<li><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></li>
<li><a href="#">防晒衣 </a><a href="#"> 休闲套装 </a><a href="#">卫衣 </a><a href="#">背心/吊带 </a></li>
<h2>裙子</h2><hr/>
<li><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></li>
<li><a href="#">牛仔裙 </a><a href="#">半身中长裙 </a><a href="#">半身短裙 </a><a href="#">包臀裙 </a></li>
<h2>裤子</h2><hr/>
<li><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><a href="#">连体裤 </a><a href="#">七/九分裤 </a><a href="#">牛仔短裤 </a><a href="#">西装裤 </a></li>
<h2>其他女装</h2><hr/>
<li><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></li>
<li><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>