简单css两栏布局

来源：互联网发布：懒人电脑椅知乎编辑：程序博客网时间：2024/06/14 06:17

css不仅仅是用来修饰细节的小装饰品，它的主要功能是控制页面整体布局（layout）的支柱。最近找到一个清晰明白的入门教程，翻译如下：

这个教程是关于怎样创建一个简单的两栏布局：包含一个logo部分(header），一个水平导航条，一个底部说明栏（footer），水平居中于浏览窗口，是个不错的布局。

第一步：创建基本的xhtml结构：
[div id="wrap"]
[div id="header"][/div]
[div id="nav"][/div]
[div id="main"][/div]
[div id="sidebar"][/div]
[div id="footer"][/div]
[/div]
接下来，在基本结构里面塞点东西：
[div id="wrap"]
[div id="header"]<h1>Document Heading</h1>[/div]
[div id="nav"]
<ul>
<li><a href="#"]Option 1[/url]</li>
<li><a href="#"]Option 2[/url]</li>
...
</ul>
[/div]
[div id="main"]
<h2>Column 1</h2>

Lorem ipsum dolor sit amet, consectetuer adipiscing

elit...

[/div]
[div id="sidebar"]
<h3>Column 2</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing

elit...

<ul>
<li><a href="#"]Link 1[/url]</li>
<li><a href="#"]Link 2[/url]</li>
...
</ul>
[/div]
[div id="footer"]

Footer

[/div]
[/div]
现在，我们已经有了一个完整的、没有经过修饰的XHTML文档，下面可以运用css来控制它的布局了。（注意：如果不是合格的XHTML文档而是传统的表格嵌套，css是无法控制布局的。）

第二步：调整<body>
为了使内容达到浏览器的两端，我们设置<body>属性的margin和padding为0，同时设定页面背景色和字体颜色。
body {
margin:0;
padding:0;
background-color:#A7A09A;
color:#000;
text-align:center;
}

第三步：处理主容器（main container）
现在我们要给内容区域设定宽度并使之水平居中，具体做法是用＃warp设定容器的宽度和margin，同时设定它的背景色。
我们设定内容居中的方法原理是：当一个元素的左右margin都被设定为auto的时候，元素的左右margin会均分剩下空白的部分。（为了说清楚这一部分翻译的不太精确，原文是：when an element’s left and right margins are set to auto, they will share whatever is left when the element’s width has been subtracted from that of its container. ）在这个例子当中，#wrap的宽度会被从浏览器的宽度中减掉。为了避免有些浏览器中窗口窄于#wrap的现象，我们把<body>的最小宽度定义等同为#wrap的宽度。
body {
margin:0;
padding:0;
background-color:#A7A09A;
color:#000;
min-width:750px;
}
div#wrap {
background:#99c;
margin:0 auto;
width:750px;
}
接下来，我们给不同部分设定不同的背景颜色使得它们清晰醒目。
#header {
background-color:#ddd;
}
#nav {
background-color:#c99;
}
#main {
background-color:#9c9;
}
#sidebar {
background-color:#c9c;
}
#footer {
background-color:#cc9;
}

第四步：放置并排的两栏
要想让两栏肩并肩并排着放置，必须要结合运用float和margin，还要设定两栏的宽度。
#main {
background-color:#9c9;
float:left;
width:500px;
}
#sidebar {
background-color:#c9c;
width:247px;
margin-left:500px;
}
#wrap > #sidebar {
width:250px;
}
留神#sidebar暂时设定为247px，是为了应付IE的3px margin bug。过会儿我们会用个IE不识别的子选项给更好的浏览器设定正确宽度。这个样子我们可以把#sidebar放在#main的右边，但是footer却错位了。

第五步：把footer拉下来
footer没有呆在主内容的下面，是因为float属性在起作用。当我们把元素float起来的时候，它就从文档序列中脱离出来了，在xhtml中看起来比实际上的要低。

在这种情况下，#footer根本不认#main而排在了#sidebar的下面。
为了避免这种情况，我们用clear属性来告诉footer不允许它靠近任何元素。
#footer {
background-color:#cc9;
clear:both;
}

第六步：解决背景颜色
现在我们看到右边的栏太短以至于无法延伸到footer，为了看起来效果好一些，我们把#sidebar和#wrap的背景设成一样的。
#sidebar {
background-color:#99c;
width:247px;
margin-left:500px;
}

第七步：让导航栏水平排列
#nav包含了链接列表，怎么才能让它们水平排列呢？
#nav ul{
margin:0;
padding:0;
}
#nav li{
display:inline;
list-style:none;
margin:0;
padding:0;
}

第八步：调整margin
最后，我们调整某些元素的margin和padding让布局看起来疏朗一些。
#header h1 {
padding:5px;
margin:0;
}
#nav {
background-color:#c99;
padding:5px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px;
}
#footer p {
padding:5px;
margin:0;
}

最终效果，请看：
www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html