1，制作北大青鸟网站的中心开班模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中心开班信息</title>
<style>
div{
width: 300px;
box-sizing: border-box;
border: 1px solid;
margin: auto;
border-radius: 10px;
background: linear-gradient(to bottom, #00a4ff,gainsboro,white);
}
li{
/*border: 1px solid;*/
margin-left: -14px;
list-style: none;
background: url("imgs3/dotBg.gif")0px 0px no-repeat;
line-height: 35px;
text-indent: 1.3em;
}
li:nth-of-type(1){
border-top: 1px white solid;
}
ul{
margin-left: -25px;
/*border: 1px solid;*/
}
</style>
</head>
<body>
<div>
<ul>
<h4 ><img src="imgs3/bg.gif" style="vertical-align: middle"/>中心开班信息</h4>
<li>8月12日：学历+技能班</li>
<li>8月16日：高考特招班</li>
<li>8月23日：Java精英班</li>
<li>8月31日：学士后强化班</li>
<li>9月5日：大学生就业班</li>
<li>9月9日：企业定向委培班</li>
<li>9月16日：网络营销强化班</li>
</ul>
</div>
</body>
</html>2，制作商品分类列表页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品分类列表页</title>
<style>
div{
width: 220px;
height: border-box;
border: 3px solid;
border-radius: 10px;
color:orange;
}
h4{
border-bottom: 1.2px dashed #0c0c0c;
padding: 5px;
/*border: 1px solid;*/
margin: 2px;
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<h4 ><img src="imgs4/icon_01.jpg" style="vertical-align: middle"/>酒水、饮料</h4>
<h4 ><img src="imgs4/icon_02.jpg" style="vertical-align: middle"/>进口食品</h4>
<h4 ><img src="imgs4/icon_03.jpg" style="vertical-align: middle"/>休闲零食</h4>
<h4 ><img src="imgs4/icon_04.jpg" style="vertical-align: middle"/>地方特产</h4>
<h4 ><img src="imgs4/icon_05.jpg" style="vertical-align: middle"/>保健、冲调</h4>
<h4 ><img src="imgs4/icon_06.jpg" style="vertical-align: middle"/>粮油、生鲜</h4>
<h4 ><img src="imgs4/icon_07.jpg" style="vertical-align: middle"/>美容洗护</h4>
<h4 ><img src="imgs4/icon_08.jpg" style="vertical-align: middle"/>清洁洗涤</h4>
<h4 ><img src="imgs4/icon_09.jpg" style="vertical-align: middle"/>母婴、纸品</h4>
<h4 style="border-bottom: none"><img src="imgs4/icon_10.jpg" style="vertical-align: middle"/>家居百货</h4>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>免费体验登陆页面</title>
<style>
div{
/*border: 1px solid;*/
width: 312px;
height: border-box;
}
form{
border: 1px solid red;
margin: -280px 0px 0px 0px;
}
li{
margin: 15px 0px 0px 0px;
list-style: none;
color: white;
}
input{
border-radius: 5px;
border: 1px solid black;
}
select,option{
border-radius: 5px;
border: 1px solid black;
}
.wode{
border: none;
margin: 0px 0px 0px 80px;
}
</style>
</head>
<body>
<div>
<img src="imgs5/bg.jpg">
<form method="post" action="#">
<ul>
<li>*姓名：<input type="text"/></li>
<li>*邮箱：<input type="text"/></li>
<li>*电话：<input type="text"/></li>
<li>性别:<select>
<option>请选择</option>
</select></li>
<li>年龄:<select>
<option>请选择</option>
</select></li>
</ul>
</form>
<input type="image" src="imgs5/btn.jpg" class="wode"/>
</div>
</body>
</html>