<!DOCTYPE html>
<!--
作者:向超
时间:2018-01-11
描述:建立一个购物网站
-->
<html>
<head>
<meta charset="UTF-8">
<title>mizhe</title>
<style>
body{
min-width: 1006px;
}
</style>
<link rel="stylesheet" href="css/div-head-01.css" />
<link rel="stylesheet" href="css/div-head-02.css" />
<link rel="stylesheet" href="css/div-head-03.css" />
<link rel="stylesheet" href="css/div-head-04.css" />
<link rel="stylesheet" href="css/div-center-01.css" />
<link rel="stylesheet" href="css/div-center-02.css" />
<link rel="stylesheet" href="css/div-center-03.css" />
<link rel="stylesheet" href="css/div-center-04.css" />
<link rel="stylesheet" href="css/div-over-01.css" />
<link rel="stylesheet" href="css/div-over-02.css" />
<link rel="stylesheet" href="css/div-over-03.css" />
<link rel="stylesheet" href="css/div-over-04.css" />
</head>
<body>
<!--导航栏——QQ小导航+右边导航-->
<div class="div-head-01">
<div class="div-head-01-01">
<div class="div-head-01-01-01">
<ul class="ul-head-01">
<li>
<img src="img/qq.jpg" style="margin-right: 5px;" />
<a href="#" style="margin-right: 5px;">QQ登陆</a>
<img src="img/xjian.jpg" style="margin-right: 20px;" />
<span>|</span>
</li>
<li>
<a href="#">请登陆</a>
<a href="#" style="color: red;">免费注册</a>
</li>
</ul>
</div>
<div class="div-head-01-01-02">
<ul class="ul-head-02">
<li>
<a href="#" style="margin: 0 5px;">我的米折</a>
<span>|</span>
<a href="#" style="margin: 0 5px;">我的订单</a>
<span>|</span>
<a href="#" style="margin: 0 5px;">消息</a>
<span>|</span>
<a href="#" style="margin-left: 5px;">邀请好友</a>
<img src="img/jiang.jpg" style="margin-right: 5px;" />
<span>|</span>
<a href="#" style="margin: 0 5px;">帮助中心</a>
<span>|</span>
<a href="#" style="margin: 0 5px;">联系客服</a>
<span>|</span>
<img src="img/ihpone.jpg" style="margin-left: 5px;" />
<a href="#" style="margin-right: 5px;">手机米折</a>
<span>|</span>
<a href="#" style="margin-left: 5px;">关注</a>
<img src="img/xjian.jpg" />
</li>
</ul>
</div>
</div>
</div>
<!--红色索栏-->
<div class="div-head-02">
<div class="div-head-02-01">
<div class="div-head-02-01-01">
<img src="img/logo1.jpg" />
</div>
<div class="div-head-02-01-02">
<img src="img/logo2.jpg" />
</div>
<div class="div-head-02-01-03">
<div class="div-head-02-01-03-01">
<div class="div-head-02-01-03-01-01">
<span>淘宝</span>
<img src="img/xjian.jpg" />
</div>
<input type="text" />
<a href="#">购物拿返利</a>
</div>
</div>
<div class="div-head-02-01-04">
<img src="img/logo3.jpg" />
</div>
</div>
</div>
<!--内容导航栏-->
<div class="div-head-03">
<div class="div-head-03-01">
<ul class="ul-head-03">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">品牌特卖</a>
</li>
<li>
<a href="#">10元购</a>
</li>
<li>
<a href="#">购物返利</a>
</li>
<li>
<a href="#">手机客户端</a>
</li>
<li>
<a href="#">贝贝网</a>
</li>
<li>
<a href="#">商家中心</a>
</li>
</ul>
</div>
</div>
<!--导航栏与内容之间的分割模块-->
<div class="div-head-05" style="height: 15px;"></div>
<!--内容——大图+立即注册-->
<div class="div-head-04">
<div class="div-head-04-01">
<img src="img/tu1.jpg" style="float: left;" />
<img src="img/tu2.jpg" style="float: left;" />
<img src="img/tu3.jpg" style="float: left;" />
</div>
<div class="div-head-04-02">
<div class="div-head-04-02-01">
<ul class="ul-conter-01">
<li>
<a href="#">立即注册</a>
<span>已有账号,马上登陆</span>
</li>
</ul>
</div>
<div class="div-head-04-02-02">
<ul class="ul-conter-02">
<li>
<img src="img/feiji.jpg" />
<a href="#">包邮专项福利</a>
<span>Free shipping</span>
</li>
<li>
<img src="img/feiji.jpg" />
<a href="#">包邮专项福利</a>
<span>Free shipping</span>
</li>
<li>
<img src="img/feiji.jpg" />
<a href="#">包邮专项福利</a>
<span>Free shipping</span>
</li>
</ul>
</div>
</div>
</div>
<!--内容——居家TOP+3.5折包邮-->
<div class="div-center-01">
<ul class="ul-conter-04">
<li class="li-01">
<nav class="nav-center-01">
<ul class="ul-conter-03">
<li>
<div class="div-center-01-01" style="position: relative;width: 40px;height: 40px;z-index: 2;background: #FF6347;border-radius: 180px;">
<div class="div-center-01-01-01" style="position: absolute;width: 30px;height: 30px;z-index: 3;left: 8px;top: 4px;">
<span>居家TOP</span>
</div>
</div>
<div class="div-center-01-02">
<img src="img/meinv.jpg" />
</div>
<div class="div-center-01-03">
<span>¥<span>59.00</span></span>
<span>3.5折包邮</span>
</div>
</li>
</ul>
</nav>
<nav class="nav-center-01">
<ul class="ul-conter-03">
<li>
<div class="div-center-01-01" style="position: relative;width: 40px;height: 40px;z-index: 2;background: #FF6347;border-radius: 180px;">
<div class="div-center-01-01-01" style="position: absolute;width: 30px;height: 30px;z-index: 3;left: 8px;top: 4px;">
<span>居家TOP</span>
</div>
</div>
<div class="div-center-01-02">
<img src="img/meinv.jpg" />
</div>
<div class="div-center-01-03">
<span>¥<span>59.00</span></span>
<span>3.5折包邮</span>
</div>
</li>
</ul>
</nav>
<nav class="nav-center-01">
<ul class="ul-conter-03">
<li>
<div class="div-center-01-01" style="position: relative;width: 40px;height: 40px;z-index: 2;background: #FF6347;border-radius: 180px;">
<div class="div-center-01-01-01" style="position: absolute;width: 30px;height: 30px;z-index: 3;left: 8px;top: 4px;">
<span>居家TOP</span>
</div>
</div>
<div class="div-center-01-02">
<img src="img/meinv.jpg" />
</div>
<div class="div-center-01-03">
<span>¥<span>59.00</span></span>
<span>3.5折包邮</span>
</div>
</li>
</ul>
</nav>
<nav class="nav-center-01">
<ul class="ul-conter-03">
<li>
<div class="div-center-01-01" style="position: relative;width: 40px;height: 40px;z-index: 2;background: #FF6347;border-radius: 180px;">
<div class="div-center-01-01-01" style="position: absolute;width: 30px;height: 30px;z-index: 3;left: 8px;top: 4px;">
<span>居家TOP</span>
</div>
</div>
<div class="div-center-01-02">
<img src="img/meinv.jpg" />
</div>
<div class="div-center-01-03">
<span>¥<span>59.00</span></span>
<span>3.5折包邮</span>
</div>
</li>
</ul>
</nav>
<nav class="nav-center-01">
<ul class="ul-conter-03">
<li>
<div class="div-center-01-01" style="position: relative;width: 40px;height: 40px;z-index: 2;background: #FF6347;border-radius: 180px;">
<div class="div-center-01-01-01" style="position: absolute;width: 30px;height: 30px;z-index: 3;left: 8px;top: 4px;">
<span>居家TOP</span>
</div>
</div>
<div class="div-center-01-02">
<img src="img/meinv.jpg" />
</div>
<div class="div-center-01-03">
<span>¥<span>59.00</span></span>
<span>3.5折包邮</span>
</div>
</li>
</ul>
</nav>
</li>
</ul>
</div>
<!--内容——近日特卖分割模块-->
<div class="div-center-02">
<ul>
<li>
<span>今日特卖/</span>
<img src="img/nao.jpg" />
</li>
<li>
<span>本场剩余:16小时57分钟49秒</span>
</li>
</ul>
</div>
<!--内容——内容导航栏-->
<div class="div-center-03">
<ul class="ul-conter-05">
<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>
<li>
<a href="#">9.9包邮</a>
</li>
<li>
<a href="#">明日精选</a>
</li>
</ul>
</div>
<!--内容——内容模块-->
<div class="div-center-05">
<ul class="ul-conter-07">
<li>
<div class="div-center-04">
<ul class="ul-conter-06">
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="div-center-04">
<ul class="ul-conter-06">
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span06">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="div-center-04">
<ul class="ul-conter-06">
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="div-center-04">
<ul class="ul-conter-06">
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
<li>
<div class="div-center-04-01">
<div class="div-center-04-01-01">
<img src="img/dameinv.jpg" />
</div>
<div class="div-center-04-01-02">
<span class="span07">¥<span>59</span>.00</span>
<img src="img/youhui.jpg" />
<span class="span06">8776人已开抢</span>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!--结尾——友情链接-->
<div class="div-over-01">
<ul class="ul-over-01">
<li><span style="font-size: 0.8em;">友情链接:</span></li>
<li><a href="#">多麦CPS联盟</a></li>
<li><a href="#">多麦CPS联盟</a></li>
<li><a href="#">多麦CPS联盟</a></li>
<li><a href="#">多麦CPS联盟</a></li>
<li><a href="#">多麦CPS联盟</a></li>
<li><a href="#">多麦CPS联盟</a></li>
<li><a href="#">煎蛋网</a></li>
<li><a href="#">多麦CPS联盟</a></li>
<li><a href="#">家分期</a></li>
<li><a href="#">更多>></a></li>
</ul>
</div>
<!--结尾——太有才了模块-->
<div class="div-over-02">
<ul class="ul-over-02">
<li><a href="#">首页<sup>|</sup></a></li>
<li><a href="#">太有才了<sup>|</sup></a></li>
<li><a href="#">太有才了<sup>|</sup></a></li>
<li><a href="#">太有才了<sup>|</sup></a></li>
<li><a href="#">太有才了<sup>|</sup></a></li>
<li><a href="#">太有才了<sup>|</sup></a></li>
<li><a href="#">太有才了<sup>|</sup></a></li>
<li><a href="#">太有才了<sup>|</sup></a></li>
<li><a href="#">太有才了<sup>|</sup></a></li>
<li><a href="#">太有才了<sup>|</sup></a></li>
<li><a href="#">太有才了<sup></sup></a></li>
</ul>
</div>
<!--结尾——五个工商图模块-->
<div class="div-over-03">
<img src="img/taiduo_03.jpg" />
<img src="img/taiduo_05.jpg" />
<img src="img/taiduo_07.jpg" />
<img src="img/taiduo_09.jpg" />
<img src="img/taiduo_11.jpg" />
</div>
<!--结尾——最后两行公司说明+转载-->
<div class="div-over-04">
<p style="font-size: 0.8em;">©2011-2015米折网-Annabel服装有限公司成都分公司</p>
<p>
<img style="margin-bottom: -3px;"src="img/jia.jpg" />
<span style="font-size: 0.8em;">分享米折网到:</span>
<img style="margin-bottom: -3px;"src="img/pap_03.jpg" />
<img style="margin-bottom: -3px;"src="img/pap_05.jpg" />
<img style="margin-bottom: -3px;"src="img/pap_07.jpg" />
<img style="margin-bottom: -3px;"src="img/pap_09.jpg" />
</p>
</div>
</body>
</html>
CSS文件:div-head-01.css
* {
margin: 0px;
padding: 0px;
}
a {
font-size: 0.8em;
text-decoration: none;
}
.div-head-01 {
height: 40px;
background: white;
border-bottom: 2px solid #F4F4F4;
}
.div-head-01-01 {
height: 40px;
width: 1006px;
margin: auto;
}
.div-head-01-01-01 {
height: 40px;
width: 250px;
line-height: 40px;
float: left;
}
.ul-head-01 li {
list-style: none;
display: inline-block;
}
.div-head-01 img {
vertical-align: middle;
}
.ul-head-01 li:last-child a {
margin-left: 15px;
}
.div-head-01-01-02 {
height: 40px;
width: 700px;
float: right;
line-height: 40px;
}
.div-head-01-01-02 li {
list-style: none;
text-align: right;
}
.div-head-01-01-02 li a{
color: black;
}
.div-head-01-01-01 a{
color: black;
}
CSS文件:
div-head-02.css
.div-head-02 li {
list-style: none;
}
.div-head-02 {
background: white;
height: 100px;
}
.div-head-02-01 {
height: 100px;
width: 1006px;
margin: auto;
}
.div-head-02-01-01 {
height: 100px;
width: 100px;
float: left;
}
.div-head-02-01-01 img {
margin-top: 22px;
}
.div-head-02-01-02 {
height: 100px;
width: 150px;
float: left;
}
.div-head-02-01-02 img {
margin-top: 34px;
}
.div-head-02-01-04 {
height: 100px;
width: 137px;
float: right;
}
.div-head-02-01-04 img {
margin-top: 8px;
}
.div-head-02-01-03 {
height: 100px;
width: 490px;
float: left;
margin-left: 70px;
}
.div-head-02-01-03-01 {
height: 40px;
width: 490px;
margin-top: 30px;
background: #FF4500;
}
.div-head-02-01-03-01-01 {
float: left;
height: 36px;
width: 68px;
display: inline-block;
line-height: 36px;
background: #F8F8FF;
margin-top: 2px;
margin-left: 2px;
}
.div-head-02-01-03-01-01 span {
margin-left: 15px;
color: #D3D3D3;
}
.div-head-02-01-03-01 a {
float: right;
color: black;
font-size: 1.1em;
margin-top: 8px;
padding-left: 20px;
padding-right: 30px;
}
.div-head-02-01-03-01 input {
float: left;
margin-top: 2px;
height: 32px;
width: 270px;
}
CSS文件:
div-head-03.css
.div-head-03 {
height: 40px;
background: #f60;
}
.div-head-03-01{
height: 40px;
width: 1006px;
margin: auto;
}
.div-head-03-01 li{
list-style: none;
display: inline-block;
line-height: 40px;
margin: 0 5px;
padding-left: 25px;
padding-right: 25px;
}
.div-head-03-01 a{
color: white;
}
.div-head-03-01 li:last-child{
float: right;
}
.div-head-03-01 li:hover{
background: #d40;
}
CSS文件:
div-head-04.css
.div-head-04{
margin-top: 10px;
width: 1006px;
height: 321px;
margin: auto;
background: #FFFAFA;
}
.div-head-04-01{
width: 840px;
height: 321px;
float: left;
}
.div-head-04-02{
width: 150px;
height: 321px;
float: right;
}
.div-head-04-02 li{
list-style: none;
}
.div-head-04-02-01{
height: 130px;
width: 150px;
border-bottom: 2px solid #ccc;
}
.div-head-04-02-01 a{
height: 30px;
width: 100px;
background: #f60;
display: inline-block;
margin-top:25px;
margin-left: 25px;
text-align: center;
line-height: 30px;
border-radius: 5px;
color: black;
}
.div-head-04-02-01 span{
display: inline-block;
font-size: 0.8em;
margin-top: 20px;
margin-left: 16px;
}
.div-head-04-02-02 li img{
float: left;
margin-top:17px;
}
.div-head-04-02-02 li a{
display: inline-block;
color: black;
margin-top:10px;
margin-left: 5px;
}
.div-head-04-02-02 span{
display: inline-block;
font-size: 0.1em;
margin-top: -3px;
margin-left: 5px;
}
CSS文件:.div-center-01
.css
body{
background: #F8F8FF;
}
.div-center-01 {
position:relative;
width: 1006px;
height: 240px;
background: white;
margin: auto;
margin-top: 20px;
}
.div-center-01 ul{
margin-top:15px ;
width: 1000px;
}
.div-center-01 ul li{
position: relative;
width: 197px;
height: 250px;
list-style: none;
float: left;
}
.div-center-01 ul li:first-child{
left: 8px;
}
.div-center-01-01-01 span {
font-size: 0.8em;
float: left;
color: white;
}
.div-center-01-02 {
width: 160px;
height: 160px;
position: absolute;
top: 15px;
left: 15px;
}
.div-center-01-03 {
width: 160px;
height: 20px;
position: absolute;
top: 184px;
left: 14px;
}
.div-center-01-03 span:last-child {
font-size: 0.9em;
color: #999;
}
.div-center-01-03 span:first-child {
color: red;
font-size: 0.9em;
}
.div-center-01-03 span:first-child span{
font-size: 1.3em;
}
CSS文件:.div-center-02
.css
.div-center-02{
height: 50px;
width: 1006px;
margin: auto;
}
.div-center-02 ul{
height: 70px;
width: 1006px;
list-style: none;
}
.div-center-02 li{
display: inline-block;
}
.div-center-02 li:first-child{
margin-left: -195px;
margin-top: 8px;
}
.div-center-02 li:first-child span{
font-size: 1.6em;
}
.div-center-02 img{
position: relative;
margin-top: 4px ;
}
.div-center-02 li:last-child span{
font-size: 0.9em;
margin-top: 1px;
margin-left: 17px;
}
CSS文件:.div-center-03
.css
.div-center-03{
width: 986px;
height: 40px;
background: white;
margin: auto;
padding: 0 10px;
}
.div-center-03 ul{
height: 35px;
width: 946px;
border-bottom: 5px solid #EEE;
padding: 0 20px;
}
.div-center-03 li{
list-style: none;
width: 68px;
height: 35px;
float: left;
line-height: 35px;
text-align: center;
padding: 0 3px;
}
.div-center-03 a{
color: black;
}
.div-center-03 li:hover{
border-bottom: 5px solid red;
}
.div-center-03 a:hover{
color: red;
}
.div-center-03 li:nth-last-child(2) a{
color: red;
}
.div-center-03 li:last-child a{
color: red;
}
CSS文件:.div-center-04
.css
.div-center-04 {
width: 1006px;
height: 340px;
background: white;
margin: auto;
}
.div-center-04 ul{
display: inline-block;
margin-top: 30px;
height: 310px;
width: 1006px;
list-style: none;
border-bottom: 2px solid #EEE;
}
.div-center-04 ul li{
height: 310px;
margin-top: 40px;
float: left;
margin: 0 15px;
}
.div-center-04-01 {
width: 220px;
height: 310px;
}
.div-center-04-01-01{
width: 220px;
height:220px;
}
.div-center-04-01-02{
width: 220px;
height: 33px;
text-align: center;
margin-top: 30px ;
}
.div-center-04-01-02 span span{
font-size: 1.6em;
font-family: "微软雅黑";
}
.div-center-04-01-02 img{
margin-bottom: -8px;
}
.div-center-04-01-02 .span06{
font-size: 0.8em;
color: #999999;
}
.div-center-04-01-02 .span07{
font-size: 0.8em;
color: red;
}
CSS文件:.div-over-01
.css
.div-over-01{
margin-top: 60px;
height: 70px;
background: white;
}
.div-over-01 ul{
margin: auto;
height: 69px;
width: 960px;
list-style: none;
border-bottom: 2px dotted #999999;
}
.div-over-01 li{
margin-left: 9px;
margin-top: 24px;
float: left;
}
.div-over-01 li:first-child{
margin-left: 0px;
margin-right: -11px;
}
.div-over-01 li:last-child{
float: right;
}
.div-over-01 li a{
color: #999999;
}
CSS文件:.div-over-02
.css
.div-over-02{
height: 43px;
background: white;
}
.div-over-02 ul{
height: 43px;
width: 812px;
margin: auto;
list-style: none;
}
.div-over-02 li{
float: left;
line-height: 43px;
text-align: center;
margin: 0 1px;
}
.div-over-02 a{
color: #999;
}
.div-over-02 sup{
margin:0 10px ;
}
CSS文件:.div-over-03
.css
.div-over-03{
height: 50px;
background: white;
}
.div-over-03 img{
float: left;
margin-right: 10px;
}
.div-over-03 img:first-child{
margin-left: 396px;
}
CSS文件:.div-over-04
.css
.div-over-04{
height: 100px;
background: white;
}
.div-over-04 p{
padding-top: 12px;
margin-left: 495px;
}
.div-over-04 p:last-child{
margin-left: 606px;
}