小米商城的布局_PHP中文网手记

摘要：布局css代码*{margin:0px;padding: 0px;} li{list-style: none;} a{text-decoration: none;color: #ccc} .clear{clear:both;} /*头部*/ .header{width:100%;height: 40px;background: #3333

布局css代码

*{margin:0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;color: #ccc}
.clear{clear:both;}
/*头部*/
.header{width:100%;height: 40px;background: #333333; }
.menu{margin: 0px auto;height: 40px;background: #ccc;width: 1226px;}
/*主体*/
.content{margin: 0px auto;width: 1226px;}
.contentMenu{margin: 10px auto;height: 90px;width: 1226px;
	background:#ccc }
.contentPic{margin: 10px auto;height: 480px;width: 1226px;
	background:#ccc}
.contentPic_ul{margin: 10px auto;height: 180px;width: 1226px;
	background:#ccc}
.contentShop{margin: 10px auto;height: 280px;width: 1226px;
	background:#ccc}
.contentImg{margin: 10px auto;height: 100px;width: 1226px;
	background:#ccc}
.contentUl{margin: 10px auto;height: 80px;width: 1226px;
	background:#ccc}
.contentPhone{margin: 10px auto;height: 500px;width: 1226px;
	background:#ccc}
/*尾部*/
.footers{height: 100px;width: 100%;}
.footer{margin: 10px auto;height: 100px;background: #ccc;width: 1226px;}

布局html代码

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>小米商城</title>
	<link rel="shortcut icon" type="image/x-icon" href="static/img/footlogo.png">
	<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
	<div class="menu">
	
	</div>
</div>
<!-- 主体 -->
<div class="contents">
	<div class="content">
	<div class="contentMenu"></div>
	<div class="contentPic"></div>
	<div class="contentPic_ul"></div>
	<div class="contentShop"></div>
	<div class="contentImg" style="background:url(static/img/longAD1.jpg)"></div>
	<div class="contentUl">手机</div>
	<div class="contentPhone"></div>
	<div class="contentImg" style="background:url(static/img/longAD2.jpg)"></div>
	<div class="contentUl">家电</div>
	<div class="contentPhone"></div>
	<div class="contentImg" style="background:url(static/img/longAD3.jpg)"></div>
	<div class="contentUl">智能</div>
	<div class="contentPhone"></div>
	<div class="contentImg" style="background:url(static/img/longAD4.jpg)"></div>

	</div>
</div>
<!-- 尾部 -->
<div class="footers">
<div class="footer">
网页底部
</div>
</div>
	
</body>
</html>

小米商城的布局

热门词条