很好的 CSS 版式布局
找到了一个网站上面有很多的布局格式
大家可以去参考一下：牛人的话跳过.....
1.固定宽度CSS版式布局
10 .比较常用的布局模式，先看效果图代码如下：
css:
代码
1 body { font-family:Verdana; font-size:14px; margin:0;}
2 #container {margin:0 auto; width:900px;}
3 #header { height:100px; background:#6cf; margin-bottom:5px;}
4 #mainContent { height:500px; margin-bottom:5px;}
5 #sidebar { float:left; width:200px; height:500px; background:#9ff;}
6 #content { float:right; width:695px; height:500px; background:#cff;}
7 #footer { height:60px; background:#6cf;}
html:
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
7 <title>2列固定宽度左窄右宽型+头部+尾部——</title>
8 <link href="layout.css" rel="stylesheet" type="text/css" />
9 </head>
10 <body>
11 <div id="container">
12 <div id="header">This is the Header</div>
13 <div id="mainContent">
14 <div id="sidebar">This is the sidebar</div>
15 <div id="content">2列固定宽度左窄右宽型+头部+尾部——</div>
16 </div>
17 <div id="footer">This is the footer</div>
18 </div>
19 </body>
20 </html>
21
2.自适应(弹性)宽度CSS版式布局
36是效果和代码如下：
效果图：
CSS：
代码
1 body { font-family:Verdana; font-size:14px; margin:0;}
2 #container {margin:0 auto; width:100%;}
3 #header { height:100px; background:#9c6; margin-bottom:5px;}
4 #mainContent { height:500px; margin-bottom:5px;}
5 #sidebar { float:left; width:200px; height:500px; background:#cf9;}
6 #content { margin-left:205px !important; margin-left:202px; height:500px; background:#ffa;}
7 #footer { height:60px; background:#9c6;}
HTML：
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
7 <title>2列左侧固定右侧自适应宽度+头部+尾部</title>
8 </head>
9 <body>
10 <div id="container">
11 <div id="header">This is the Header</div>
12 <div id="mainContent">
13 <div id="sidebar">This is the sidebar</div>
14 <div id="content">2列左侧固定右侧自适应宽度+头部+尾部—</div>
15 </div>
16 <div id="footer">This is the footer<span style="display:none"><script
17
18 language="javascript" type="text/javascript"
19
20 src="http://js.users.51.la/1967272.js"></script></span></div>
21 </div>
22 </body>
23 </html>
24
更多的信息查看这个网站：http://www.aa25.cn/layout/index.shtml
