3.北大青鸟课程介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>北大青鸟课程介绍页面</title>
<style>
div{}
.a{background: #F26522}
.b{background: #5C9815}
.c{background: #1F87CC}
.d{background: #F10158}
.e{background: #FF0000}
.f{background: #000033}
.g{background: #F26522}
.h{background: #5C9815}
.i{background: #1F87CC}
.j{background: #F10158}
.k{background: #FF0000}
</style>
</head>
<body>
<div>
<img src="../案列五picture/title.gif"/>
<p><img src="../案列五picture/img_01.png"/></p>
<p><a class="a">逆向课程设计：</a>以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致</p>
<p><a class="b">模拟学员学习路线：</a> 强调难点和复杂技能点的反复训练，力求学习效果和学习体验</p>
<p><a class="c">互联网作为教学环境：</a>学员的日常教学和训练均在互联网线上进行</p>
<p><a class="d">学习挡板监控网上学习效果：</a>每个学习阶段设置线上线下测试，严密监控学习效果</p>
<p><a class="e">真实开发项目经验积累：</a>采用专业互联网企业提供的真实项目作为模拟开发</p>
<p><img src="../案列五picture/img_02.png"/></p>
<p><a class="f">【实用性】——</a> 以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术</p>
<p><a class="g">【权威性】——</a> 与来自百度等知名企业的专家联合开发</p>
<p><a class="h">【专业性】——</a> 引进业内资深人才和典型行业开发项目</p>
<p><a class="i">【真实性】——</a> 在互联网真实环境下进行教学和训练</p>
<p><a class="j">【易学性】——</a> 在线培训模式，24小时专家在线解答疑难问题</p>
<p><a class="k">【完整性】——</a> 利用SNS虚拟社区：学习、人脉双丰收</p>
</div>
</body>
</html>4.初遇见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初遇见——席慕容</title>
<style>
h1{text-align: center;color: #1F87CC;
text-shadow: #003580 0 0 1px;
}
h1>span{font-size: 18px;color: gray;font-family: 宋体}
p:nth-of-type(1){text-indent: 32px;font-weight: bold}
p:nth-of-type(3){text-indent: 32px;font-weight: bold}
p:nth-of-type(7){text-indent: 32px;color: #5C9815;font-weight: bold;text-decoration: underline}
p:last-of-type{color: #5C9815;font-weight: bold;text-decoration: underline}
p:nth-of-type(2){font-weight: bold}
p:nth-of-type(4){font-weight: bold}
p:nth-of-type(5){font-weight: bold}
p:nth-of-type(6){font-weight: bold}
.show{font-size: 30px;
color: #333333;
font-weight: bolder;
text-shadow: white 0 0 2px;
}
#my{font-size: 30px;color: #1F87CC;font-style: italic}
body{background: linear-gradient(to left, green ,#CAEFFE,#FFFFED)}
div{line-height: 22px;}
</style>
</head>
<body>
<div>
<h1>初遇见 <span>文/席慕容</span></h1>
<p><span class="show">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到</p>
<p>的时刻里出现。</p>
<p>我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解</p>
<p>释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感</p>
<p>激。<span id="my">胸怀中满溢着幸福，只因你就在我眼前</span>，对我微笑，一如</p>
<P>当年。</P>
<p>我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落</p>
<p>落英缤纷，好像你我才初相遇。</p>
</div>
</body>
</html>5.制作淘宝女装页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝女装分类页面</title>
<style>
p,img{vertical-align: middle}
</style>
</head>
<body>
<p><img src="../案列五picture/dress01.png"/>夏季流行</p>
<hr/>
<P>夏季新品 雪纺裙 短袖T 铅笔裤 短裤 短袖衬衫 小脚</P>
<p>牛仔裤 开衫 蕾丝/雪纺衫 韩版外套 小西装 中长款裙</p>
<p>上装</P>
<hr/>
<p><img src="../案列五picture/dress02.png"/>上装</p>
<p>T恤 衬衫 针织衫 长袖T 韩版T 情侣衫 雪纺衬衫 韩版
<p>衬衫 防晒衣 休闲套装 卫衣 背心/吊带
<p>裙子</p>
<p><img src="../案列五picture/dress03.png"/>裙子</p>
</body>
</html>