3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中心开班信息</title>
<style>
div{
width: 250px;
background: linear-gradient(to bottom,#7BCDFA,#C9EBFD,#FFFFFF);
border:grey 1px solid;
border-radius: 10px;
margin: 0px auto;
}
h2{
font-size: 18px;
color: #FFFFED;
background:5px 1px url("bg.gif") no-repeat;
padding-left: 40px;
border-bottom:1px solid;
padding-bottom: 10px;
}
li{
list-style: none;
background:url("dotBg.gif")0px -8px no-repeat;
padding-bottom:8px;
text-indent: 1em;
margin-right: 30px;
margin-left: -30px;
}
a{
color: grey;
text-decoration: none;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<div>
<h2>中心开班信息</h2>
<ul>
<li><a href="#">8月12日：学历+技能班</a></li>
<li><a href="#">8月16日：高考特招班</a></li>
<li><a href="#">8月23日：Java精英班</a></li>
<li><a href="#">8月31日：学士后强化班</a></li>
<li><a href="#">9月5日：大学生就业班</a></li>
<li><a href="#">9月9日：企业定向委培班</a></li>
<li><a href="#">9月16日：网络营销强化班</a></li>
</ul>
</div>
</body>
</html>4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品分类列表页</title>
<style>
div{
width: 300px;
border:#FF8C3B 2px solid;
border-radius: 8px;
margin: 0px auto;
}
div ul{
padding: 0px;
margin: 0px;
}
ul{
padding: 0px;
}
li{
width: 300px;
list-style: none;
border-bottom-style:dashed;
border-bottom-width:1px;
text-indent:3em;
line-height: 60px;
}
a{
font-weight: bold;
font-size: 25px;
color: black;
text-decoration: none;
}
a:hover{
color: red;
}
li:nth-of-type(1){
background: url("icon_01.jpg")0px 6px no-repeat;
}
li:nth-of-type(2){
background: url("icon_02.jpg")0px 6px no-repeat;
}
li:nth-of-type(3){
background: url("icon_03.jpg")0px 6px no-repeat;
}
li:nth-of-type(4){
background: url("icon_04.jpg")0px 6px no-repeat;
}
li:nth-of-type(5){
background: url("icon_05.jpg")0px 6px no-repeat;
}li:nth-of-type(6){
background: url("icon_06.jpg")0px 6px no-repeat;
}
li:nth-of-type(7){
background: url("icon_07.jpg")0px 7px no-repeat;
}
li:nth-of-type(8){
background: url("icon_08.jpg")0px 9px no-repeat;
}
li:nth-of-type(9){
background: url("icon_09.jpg")0px 9px no-repeat;
}
li:nth-of-type(10){
background: url("icon_10.jpg")0px 10px no-repeat;
border-bottom: none;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">酒水、饮料</a></li>
<li><a href="#">进口食品</a></li>
<li><a href="#">休闲零食</a></li>
<li><a href="#">地方特产</a></li>
<li><a href="#">保健、冲调</a></li>
<li><a href="#">粮油、生鲜</a></li>
<li><a href="#">美容洗护</a></li>
<li><a href="#">清洁洗涤</a></li>
<li><a href="#">母婴、纸品</a></li>
<li><a href="#">家居百货</a></li>
</ul>
</div>
</body>
</html>5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>免费体验登录页面</title>
<style>
.a1{
width: 312px;
height: 353px;
background:url("bg.jpg");
}
#r1{
margin-top: 85px;
}
span{
color: red;
}
li{
list-style: none;
line-height: 40px;
}
input,select{
border-radius:5px;
}
</style>
</head>
<body>
<div class="a1">
<ul>
<form action="" method="post">
<li></li><span>*</span>姓名:<input id="r1" type="text">
<li> <span>*</span>邮箱:<input type="email">
<li><span>*</span>电话:<input type="text">
<li>性别:<select>
<option>请选择</option>
</select></li>
<li>年龄:<select>
<option>请选择</option>
</select></li>
<li><input type="image" src="btn.jpg"></li>
</form>
</ul>
</div>
</body>
</html>