XHTML布局使用说明书--三列布局_问答一下，轻松解决，电脑应用解决方案专家！

xhtml是对html语言的发展，在近几年被热炒的概念web2.0里面，这个进化了的网页制作技术，也一直受到追捧。有些人把它叫做div+css。这样叫也无可厚非。但是严格来说它是一个网页的标准。新的标准自然有它的好处，div+css是它的具体做法。这种做法，使得页面看起来简洁，div设计了网页的骨架，css像是衣服，装饰了它。而避免使用传统的table的布局带来的麻烦，如果用table布局经常会带来很多tr,td的标签，不写还不对，写了还乱。

下面我们来具体的看一个三列布局的例子，

页眉
左边	中间	右边
页尾

我们将网页分为上中下三块，中间的一块在横着分为左中右三快。每一块用一个div标签。

<div class="head">

</div>

</div>

<span class="font">页尾

</span></div>

每个标签的class属性，代表引用的CSS样式。如果光有骨架那该多难看啊。我们来装饰一个CSS的文件。我们建立了一个style.css的文件来装饰。

对于很多人来说div的布局是很难控制的，因为长度和宽度的定义在CSS文件里。而且属性读起来有点费劲。所以“百家拳软件项目研究室”特意做了一个教程，来解决大家的疑惑。就上面的例子代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

</div>

</div>

</body>

</html>这是页面部分没有什么好讲的。

下面是CSS的部分：

.head {width:100%; height:120px; background-color:blue; }

.headcotent { text-align: center; width:auto; height:auto; padding:20px }

.webbody { text-align: center; width:100%; height:100px; }

.webbody1 {width:33.3% ; height:500px; float:left; background-color:yellow; }

.webbody2 {width:33.1% ; height:500px; float:left; background-color:yellow;border-left: 1px solid;}

.webbody3 {width:33.3% ; height:500px; float:left; background-color:yellow;border-left: 1px solid; }

.footer { width:100%; height:70px; float: left; background: #0074c8; text-align: center; }

.font { color: red; text-decoration: underline; text-align: center; size: 18; }

这个文件放在style/style.css中。

这里我们着重讲一下CSS中需要注意的地方。在webbody这个类中，我们想把中间的这块分成三个横排的快。Div的标签默认都是竖排，横排的关键在于float这个属性。设置为靠左left。还有一个地方比较重要，就是webbody2,webbody3中的属性border-left意思是在左边的边框变成实线。以便将两个区间分开。

其实这只是一个典型的例子，大家照着这个做四列不能做吗？当然是能了，在webbody里面再加一组div的标签，然后在css文件里面再添加一个class不就行了吗不过它们的width加起来不能超过100%啊。

还有一点需要注意的，这个例子的网页的中间部分，右边的那个div属性border-left设为1px solid，的话，他们三个的width加一起则不能是100％，就连99.9%都不行因为两个边框还占2px呢。那么我将一个设为33.2％，加一块99.8％。在firefox3.0浏览器中可以用，但是在IE6.0则不行。如果将那个改成33.1%就那个都可以了。不同浏览器对它们的识别还是不同的。

搜索

XHTML布局使用说明书--三列布局