Html通过CSS建立简单购物网页

<!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;">&copy;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;
			}




评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值