小A(aa25)今天整理的自己用的div+css基本框架结构，这次不再是搭建基本的框架，更结节的块结构也做出来了，如果符合这种结构的可以直接拿来使用（小A做的网站大部分都是这种结构的，嘿嘿^_^）。在IE和FF下测试没变形，但没测试W3C认证，估计还通不过（5555，水平有限，以后会加倍努力的）。
HTML页面结构代码：
程序代码---[
WWW.AA25.CN]
<!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" c />
<title>常用的DIV+CSS网站布局的基本框架结构－完整版</title>
<link href="/css/loyout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>头部</h1>
</div>
<br class="clearfloat" /><!-- 用于清除浮动的元素 -->
<div id="menu">
<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="sidebar">
<div class="sidepanel">
<h4>块标题</h4>
<div class="pcontent">块内容</div>
</div>
<div class="sidepanel">
<h4>块标题</h4>
<div class="pcontent">块内容</div>
</div>
</div>
<div id="content">
<div class="mainpanel">
<h2>块标题</h2>
<div class="mcontent">块内容</div>
</div>
</div>
</div>
<br class="clearfloat" /><!-- 用于清除浮动的元素 -->
<div id="footer">
底部
</div>
</div>
</body>
</html>
CSS样式表代码：
程序代码---[
WWW.AA25.CN]
@charset "gb2312";
/* CSS Document */
@import url("/css/global.css");
/*主体*/
#container {margin:0 auto; width:900px;}
a { color
333;}
/*顶部*/
#header { height:50px; background
ff911a;}
#header h1 { padding:10px 20px;}
#menu { background
FF6600; height:24px; margin-bottom:6px;}
#menu ul li { float:left;}
#menu ul li a { display:block; padding:4px 10px 2px 10px; color
fff; text-decoration:none;}
#menu ul li a:hover { text-decoration:underline;}
/*中间*/
#mainContent { margin-bottom:6px;}
#sidebar { width:200px; float:left;}
.sidepanel { border:1px solid #ed6400; margin-bottom:6px;}
.sidepanel h4 { background
ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;}
.pcontent { padding:4px 6px;}
.pfoot {}
#content{ margin-left:206px !important; margin-left:203px; height:auto !important; height:100px;}
.mainpanel { border:1px solid #ed6400; margin-bottom:6px;}
.mainpanel h2 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;}
.mcontent { padding:4px 6px;}
/*底部*/
#footer { border-top:3px solid #ccc; height:50px; text-align:center; padding:6px;}
被包含的CSS样式表代码（把用于全局的样式单独放在一个样式表中，避免重复，方便调用）：
程序代码---[
WWW.AA25.CN]
/*全局样式*/
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:150%;}
ul,h1,h2,h3,h4,h5,h6 { 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;}
原文出处：
http://www.aa25.cn
