盒子模型"/>
第6章盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中心开班信息</title>
<link rel="stylesheet" href="../css/中心开班信息.css">
</head>
<body>
<div class="time">
<h1 id="kai">中心开班信息</h1>
<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>
.time{width: 250px;
border: 1px gray solid;
border-radius: 20px;
margin: 0px auto;
background: -moz-linear-gradient(to top,white,#1F87CC);
}
#kai{font-size: 15px;
color: #FFFFFF;
background:url("../image/bg.gif") 25px 2px no-repeat;
padding: 5px 60px;
border-bottom: 1px #FFFFFF solid;
}li{list-style: none;
}.time ul li{height: 30px;
padding-left: 15px;
padding-top: 3px;
background: url("../image/dotBg.gif")left center no-repeat;
}.time ul{padding: 0px 6px;
}
body{margin: 0px;
}
ul li a{text-decoration: none;
color: gray;
}
ul li a:hover{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品分类列表页面</title>
<link rel="stylesheet" href="../css/商品分类列表.css">
</head>
<body>
<div>
<p><a href="#">酒水、饮料</a></p>
<p><a href="#">进口食品</a></p>
<p><a href="#">休闲零食</a></p>
<p><a href="#">地方特产</a></p>
<p><a href="#">保健、冲调</a></p>
<p><a href="#">粮油、生鲜</a></p>
<p><a href="#">美容洗护</a></p>
<p><a href="#">清洁洗涤</a></p>
<p><a href="#">母婴、纸品</a></p>
<p class="jiu"><a href="#">家居百货</a></p>
</div>
</body>
</html>
div{width: 230px;
border: 2px orange solid;
border-radius: 20px;
}
p{padding: 10px 55px;
border-bottom: 1px gray dashed;
}
.jiu{border-bottom: 0px gray dashed;
}a{color: #000;
text-decoration: none;
font-weight: bold;
}
a:hover{color: red;
}p:nth-of-type(1){background: url("../image/icon_01.jpg")left center no-repeat;
}
p:nth-of-type(2){background: url("../image/icon_02.jpg")left center no-repeat;
}
p:nth-of-type(3){background: url("../image/icon_03.jpg")left center no-repeat;
}
p:nth-of-type(4){background: url("../image/icon_04.jpg")left center no-repeat;
}
p:nth-of-type(5){background: url("../image/icon_05.jpg")left center no-repeat;
}
p:nth-of-type(6){background: url("../image/icon_06.jpg")left center no-repeat;
}
p:nth-of-type(7){background: url("../image/icon_07.jpg")left center no-repeat;
}
p:nth-of-type(8){background: url("../image/icon_08.jpg")left center no-repeat;
}
p:nth-of-type(9){background: url("../image/icon_09.jpg")left center no-repeat;
}
p:nth-of-type(10){background: url("../image/icon_10.jpg")left center no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>免费体验登录页面</title>
<link rel="stylesheet" href="../css/免费体验登录页面.css">
</head>
<body>
<div>
<form method="post" action="">
<ul>
<li><p><span>*</span>姓名：<input type="text"name="name"/></p>
</li>
<li><p><span>*</span>邮箱：<input type="password" name="pass"/></p>
</li>
<li><p><span>*</span>电话：<input type="text"name="dian"/></p>
</li>
</ul>
<p class="miao">
性别：<select name="bmo">
<option value="get">请选择</option>
<option value="nan">男</option>
<option value="nv">女</option>
</select>
<p class="miao">
年龄：<select name="bmo">
<option value="age">请选择</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</p>
</form>
</div>
<img src="../image/btn.jpg"/>
</body>
</html>
body{
background: url("../image/bg.jpg")no-repeat;
}
li{list-style: none;
color: white;
}
span{color: red;
}
ul{padding-top: 60px;
padding-left: 15px;
}
.miao{padding-left: 20px;
color: white;
}
img{padding-left: 80px;
}
更多推荐
第6章盒子模型
发布评论