本人使用的页面常用布局及样式代码_Div+CSS教程
下面的代码是本人常用的div+css布局常用样式，没有测试W3C认证，应该是通不过。不足这处请大家给予纠正。
这是css代码部分：
@charset "utf-8";
@import url("/css/global.css");
/*主体*/
body { background:#41bfef;}
#container {margin:8px auto; width:900px;}
a { color:#333;}
/*顶部*/
#header { height:100px; background:#fff; margin-bottom:5px;}
#header h1 { margin:15px;}
/*中间*/
#maincontent { margin-bottom:5px;}
/*中间侧边*/
#sidebar { float:left; width:240px;}
.panel { border:1px solid #ed6400; background:#fff; margin-bottom:5px;}
.panel h3 { background:#ff911a; border-bottom:1px solid #ed6400; color:#fff; line-height:22px; text-indent:8px;}
.pcontent { padding:6px;}
/*中间主体*/
#content{ margin-left:242px; height:auto; >height:100px;}
/*底部*/
#footer { border-top:4px solid #E1E1E1; padding:5px;}
#footer span { float:right;}
这是页面代码部分：
<!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>用户博客主页</title>
<link href="/css/userindex.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>主页名称</h1>
</div>
<br class="clearfloat" /><!-- 用于清除浮动的元素 -->
<div id="mainContent">
<div id="sidebar">
<div class="panel">
<h3>块标题</h3>
<div class="pcontent">此处显示 class "pcontent" 的内容</div>
</div>
<div class="panel">
<h3>块标题</h3>
<div class="pcontent">此处显示 class "pcontent" 的内容</div>
</div>
</div>
<div id="content">
<div class="panel">
<h3>块标题</h3>
<div class="pcontent">此处显示 class "pcontent" 的内容</div>
</div>
<div class="panel">
<h3>块标题</h3>
<div class="pcontent">此处显示 class "pcontent" 的内容</div>
</div>
</div>
</div>
<br class="clearfloat" /><!-- 用于清除浮动的元素 -->
<div id="footer"><span><a href="#">本站日志</a> | <a href="#">关于</a> | <a href="#">帮助</a> | <a href="#">隐私声明</a></span>Copyright © 2007-2008 mb5u.com Inc.All rights reserved.</div>
</div>
</body>
</html>
global.css部分：
@charset "utf-8";
/*全局样式*/
body { margin:0 auto; font:normal normal normal 12px/150% Verdana; color:#333; }
ul { list-style:none;margin:0;padding:0;}
dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form { margin:0;padding:0;}
/* 字体设置 */
a,span,em,li,dd,dt,h4,h5,h6 {font:normal normal normal 1em/150% Verdana;}
h1,h2 { font:normal normal bold 1.2em/150% Verdana;}
h3 { font:normal normal bold 1em/150% Verdana;}
h4 { font:normal normal normal 1em/150% Verdana;}
/* 其它 */
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
相关Div+CSS教程：
- 相关链接：
- 教程说明：
Div+CSS教程-本人使用的页面常用布局及样式代码
。