这个模板是左右两列布局模板,不再是最基础的搭建框架,更多的块结构也做出来了,如果符合这种结构的可以直接拿来使用(我做的网站大部分都是这种结构的,嘿嘿^_^)。在IE和FF下测试没变形,但没测试W3C认证,估计还通不过(个别兼容的样式通不过)。
HTML页面结构代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>常用的DIV+CSS网站布局的基本框架结构-完整版</title> <link href="http://www.cnblogs.com/css/layout.css" rel="stylesheet" type="text/css" /> </head>
<body> <div id="container"> <div id="header"> <h1>头部</h1> </div> <div class="clearfloat"></div> <div id="nav"> <ul> <li><a href="http://www.cnblogs.com/hnyei/archive/2011/10/14/#">导航一</a></li> <li><a href="http://www.cnblogs.com/hnyei/archive/2011/10/14/#">导航二</a></li> <li><a href="http://www.cnblogs.com/hnyei/archive/2011/10/14/#">导航三</a></li> <li><a href="http://www.cnblogs.com/hnyei/archive/2011/10/14/#">导航四</a></li> <li><a href="http://www.cnblogs.com/hnyei/archive/2011/10/14/#">导航五</a></li> </ul> </div> <div id="mainContent"> <div id="main"> <div class="mainbox"> <h2>块标题</h2> <ul>块内容</ul> </div> </div> <div id="side"> <div class="sidebox"> <h4>块标题</h4> <ul>块内容</ul> </div> </div> </div> <div class="clearfloat"></div> <div id="footer"> 底部 </div> </div> </body> </html>
CSS样式表layout.css代码:
@charset "utf-8"; /* CSS Document */
@import url("/css/global.css");
/*body*/ #container {margin:0 auto; width:950px;}
/*header*/ #header { height:50px; background:#ff911a;} #header h1 { padding:10px 20px;} #nav { background:#FF6600; height:24px; margin-bottom:6px;} #nav ul li { float:left;} #nav ul li a { display:block; padding:4px 10px 2px 10px; color:#fff; text-decoration:none;} #nav ul li a:hover { text-decoration:underline;}
/*main*/ #mainContent { overflow:auto; zoom:1; margin-bottom:6px;} #side { width:200px; float:left;} .sidebox { border:1px solid #ed6400; margin-bottom:6px;} .sidebox h4 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;} .sidebox ul { padding:4px 6px;} #main{ width:742px; float:right;} .mainbox { border:1px solid #ed6400; margin-bottom:6px;} .mainbox h2 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;} .mainbox ul { padding:4px 6px;}
/*footer*/ #footer { border-top:3px solid #ccc; height:50px; text-align:center; padding:6px;}
被包含的CSS样式表global.css代码(把用于全局的样式单独放在一个样式表中,避免重复,方便调用):
@charset "utf-8"; body { margin:0 auto; 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:'microsoft yahei';} 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;}
|