整理常用的DIV CSS网站布局的基本框架结构

css中国，今天整理的自己用的div+css基本框架结构，这次不再是搭建基本的框架，更结节的块结构也做出来了，如果符合这种结构的可以直接拿来使用。在IE和FF下测试没变形，但没测试W3C认证，估计还通不过。呵呵

HTML页面结构代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>常用的DIV+CSS网站布局的基本框架结构</title> 
<link href="/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="#">导航一</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 id="mainContent"> 
    <div id="side"> 
          <div class="sidebox"> 
            <h4>块标题</h4> 
            <ul>块内容</ul> 
          </div> 
        </div> 
        <div id="main"> 
          <div class="mainbox"> 
            <h2>块标题</h2> 
            <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;}  
a { color:#333;}  
 
/*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:150%;}  
ul,dl,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}  
h1 { font-size:18px;}  
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;}  
 
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

(责任编辑：admin)

我的网站

搜索

热门标签

整理常用的DIV CSS网站布局的基本框架结构