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