上一篇说了网页的单列布局，这里小慕介绍下二列和三列布局，介绍多列布局之前小慕还需要介绍一个内容，那就是HTML标签的分类，之前的文章中，我们有说到标签的分类，主要是通过标签的写法来分类的：分为双标签和单标签两大类；还有说道标签的用处类分类的，比如文本标签、框架布局标签、超文本标签等。这里小慕再说一种标签的分类方法，根据标签在网页布局中的所占空间进行分类，可以分为两大类：
1、块状标签：如div、p、ul、h*、form等等，这些标签一般是其它标签元素的容器，可以容纳内联元素和其它块状元素，独占一行，宽度和高度起作用
2、行内标签(或内联标签)：如a、strong、span、img、input等等，这些标签只能容纳文本和其它内联元素，可与其它内联元素位于同一行，宽度和高度不起作用。
若在内联元素的属性上加上display:block，则相当于将其转换为了块状元素，此时该内联元素将独占一行，且宽度和高度起作用。
嗯，下面小慕介绍下网页的双列布局，先看例子
<!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>
<style>
*{padding:0px;margin:0px;}
body{font-size:13px;color:#333333;}
#header{width:980px;height:120px;background:#009999;margin:0px auto;padding:10px;}
#center{width:970px;height:auto;border:5px solid #006699;background:#990099;margin:10px auto;padding:10px;}
#c_left{width:270px;height:380px;background:#ffffff;float:left;padding:10px 5px;}
#c_right{width:670px;height:380px;background:#ffffff;float:right;padding:10px 5px;}
#footer{width:1000px;height:120px;background:#999900;margin:0px auto;}
.bs{font-size:60px;color:#FFFFFF;text-align:center;}
.bs2{font-size:60px;color:#000000;text-align:center;}
.clear{clear:both;}
</style>
</head>
<body>
<div id="header">这是head盒子，是网页内容头部,无上下外边距，内填充为10px，宽度为980px。左右边距自动使得div盒子居中显示。<br/><span class="bs">上</span></div>
<div id="center">
<div id="c_left">这是c_left盒子，这里使用了左浮动float:left;这里的float使得盒子可以在同一个水平线上可以共存，不然因为div是块状标签，就会把其他的同一个水平线的内容挤到下一行去，而left表示浮动时是靠左显示。<br/><span class="bs2">左</span></div>
<div id="c_right">这是c_right盒子，这里是用了右浮动float:right;这里的right和左边的差不多，指的是盒浮动时靠右边显示。<br/><span class="bs2">右</span></div>
<div class="clear"></div>
</div>
<div id="footer">这是footer盒子，是网页内容头部，无上下外边距，无内填充，文字和边框的距离为0，紧挨着出现了，宽度为1000px，因为没了左右填充宽度依然和上边保持一致。左右边距自动使得div盒子居中显示。<br/><span class="bs">下</span></div>
</body>
</html>
网页访问效果如下：
这里没什么要说的了，页面上都有说了，小慕再介绍下float吧，float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
如果外层盒子未设置具体高度而会因为内部元素浮动而不会被撑开，本例子中小慕把center的高度设置成了自动，我就在浮动的最下方加了个样式为.clear{clear:both;}的div，clear就是清楚浮动把高度自动的div撑到相应的位置，以达到相应的效果。
三列布局和二列布局一样的，上边例子稍作改动就可以了，小慕也贴出来下代码
<!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>
<style>
*{padding:0px;margin:0px;}
body{font-size:13px;color:#333333;}
#header{width:980px;height:120px;background:#009999;margin:0px auto;padding:10px;}
#center{width:970px;height:auto;border:5px solid #006699;background:#990099;margin:10px auto;padding:10px;}
#c_left{width:260px;height:380px;background:#ffffff;float:left;padding:10px 5px;}
#c_center{width:400px;height:380px;background:#ffffff;float:left;padding:10px 5px;margin-left:10px;}
#c_right{width:260px;height:380px;background:#ffffff;float:right;padding:10px 5px;}
#footer{width:1000px;height:120px;background:#999900;margin:0px auto;}
.bs{font-size:60px;color:#FFFFFF;text-align:center;}
.bs2{font-size:60px;color:#000000;text-align:center;}
.clear{clear:both;}
</style>
</head>
<body>
<div id="header">这是head盒子，是网页内容头部,无上下外边距，内填充为10px，宽度为980px。左右边距自动使得div盒子居中显示。<br/><span class="bs">上</span></div>
<div id="center">
<div id="c_left">这是c_left盒子，这里使用了左浮动float:left;这里的float使得盒子可以在同一个水平线上可以共存，不然因为div是块状标签，就会把其他的同一个水平线的内容挤到下一行去，而left表示浮动时是靠左显示。<br/><span class="bs2">左</span></div>
<div id="c_center">这是c_center盒子，这里是用了右浮动float:left;同时给了一个左边距，使得其与左div的间距为10px。<br/><span class="bs2">中</span></div>
<div id="c_right">这是c_right盒子，这里是用了右浮动float:right;这里的right和左边的差不多，指的是盒浮动时靠右边显示。此处也可以左浮动，但是同中的div一样要加一个左边距。<br/><span class="bs2">右</span></div>
<div class="clear"></div>
</div>
<div id="footer">这是footer盒子，是网页内容头部，无上下外边距，无内填充，文字和边框的距离为0，紧挨着出现了，宽度为1000px，因为没了左右填充宽度依然和上边保持一致。左右边距自动使得div盒子居中显示。<br/><span class="bs">下</span></div>
</body>
</html>
浏览器访问效果：
嗯，就这些了吧，主要还是看代码，自己布局下。
---
转载请注明本文标题和链接：《网页布局之二列布局和三列布局》
