<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>经常使用的DIV+CSS网站结构的基础框架布局-完全版</title>
<linkhref="/css/layout.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<divid="container">
<divid="header">
<h1>头部</h1>
</div>
<divclass="clearfloat"></div>
<divid="nav">
<ul>
<li><ahref="#">导航一</a></li>
<li><ahref="#">导航二</a></li>
<li><ahref="#">导航三</a></li>
<li><ahref="#">导航四</a></li>
<li><ahref="#">导航五</a></li>
</ul>
</div>
<divid="mainContent">
<divid="main">
<divclass="mainbox">
<h2>块题目</h2>
<ul>块内容</ul>
</div>
</div>
<divid="side">
<divclass="sidebox">
<h4>块题目</h4>
<ul>块内容</ul>
</div>
</div>
</div>
<divclass="clearfloat"></div>
<divid="footer">
底部
</div>
</div>
</body>
</html>
@charset"utf-8";
/*CSSDocument*/
@importurl("/css/global.css");
/*body*/
#container{margin:0auto;width:950px;}
/*header*/
#header{height:50px;background:#ff911a;}
#headerh1{padding:10px20px;}
#nav{background:#FF6600;height:24px;margin-bottom:6px;}
#navulli{float:left;}
#navullia{display:block;padding:4px10px2px10px;color:#fff;text-decoration:none;}
#navullia:hover{text-decoration:underline;}
/*main*/
#mainContent{overflow:auto;zoom:1;margin-bottom:6px;}
#side{width:200px;float:left;}
.sidebox{border:1pxsolid#ed6400;margin-bottom:6px;}
.sideboxh4{background:#ff911a;padding:2px6px;border-bottom:1pxsolid#ed6400;color:#fff;}
.sideboxul{padding:4px6px;}
#main{width:742px;float:right;}
.mainbox{border:1pxsolid#ed6400;margin-bottom:6px;}
.mainboxh2{background:#ff911a;padding:2px6px;border-bottom:1pxsolid#ed6400;color:#fff;}
.mainboxul{padding:4px6px;}
/*footer*/
#footer{border-top:3pxsolid#ccc;height:50px;text-align:center;padding:6px;}
@charset"utf-8";
body{margin:0auto;font-size:12px;font-family:Verdana;line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p{padding:0;margin:0;}
h1{font-size:20px;font-family:microsoftyahei;}
h2{font-size:14px;}
h3{font-size:14px;font-weight:normal;}
h4{font-size:12px;}
h5{font-size:12px;font-weight:normal;}
ul{list-style:none;}
img{border:0px;}
a{color:#195cb5;text-decoration:none;}
a:hover{color:#f00;}
.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}
欢迎光临 仓酷云 (http://ckuyun.com/) | Powered by Discuz! X3.2 |