xhtml是对html语言的发展，在近几年被热炒的概念web2.0里面，这个进化了的网页制作技术，也一直受到追捧。有些人把它叫做div+css。这样叫也无可厚非。但是严格来说它是一个网页的标准。新的标准自然有它的好处，div+css是它的具体做法。这种做法，使得页面看起来简洁，div设计了网页的骨架，css像是衣服，装饰了它。而避免使用传统的table的布局带来的麻烦，如果用table布局经常会带来很多tr,td的标签，不写还不对，写了还乱。
下面我们来具体的看一个三列布局的例子，
|
页眉 | ||
|
左边 |
中间 |
右边 |
|
页尾 | ||
我们将网页分为上中下三块，中间的一块在横着分为左中右三快。每一块用一个div标签。
<div class="head">
<!-- 页眉 -->
<div class="headcotent">
<span class="font">页眉</span>
</div>
</div>
<div class="webbody">
<!-- 主体 -->
<div class="webbody1">
<span class="font">左边</span></div>
<div class="webbody2">
<span class="font">中间</span></div>
<div class="webbody3">
<span class="font">右边</span></div>
</div>
<div class="footer">
<!-- 页尾 -->
<span class="font">页尾
</span></div>
每个标签的class属性，代表引用的CSS样式。如果光有骨架那该多难看啊。我们来装饰一个CSS的文件。我们建立了一个style.css的文件来装饰。
对于很多人来说div的布局是很难控制的，因为长度和宽度的定义在CSS文件里。而且属性读起来有点费劲。所以“百家拳软件项目研究室”特意做了一个教程，来解决大家的疑惑。就上面的例子代码如下：
<!DOCTYPE html PUBLIC "-//W
<!-- 导入dtd文件如果用xhtml的话必须有这句 -->
<!-- 命名空间 -->
<html lang="zh" xml:lang="zh" xmlns="http://www.w3.org/1999/xhtml">
<head><!--标签起到了对整个网页的描述作用 包括作者 关键字等 -->
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<meta name="description" content="三列布局实例" />
<meta name="author" content="百家拳软件项目研究室" />
<meta name="keywords" content="xhtml,div css,百家拳软件项目研究室" />
<title>三列布局</title>
<!-- link引用了css文件 -->
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen,projection" />
</head>
<body>
<div class="head">
<!-- 页眉 -->
<div class="headcotent">
<span class="font">页眉 <a href="" class="font">网站首页</a></span>
</div>
</div>
<div class="webbody">
<!-- 主体 -->
<div class="webbody1">
<span class="font">左边</span></div>
<div class="webbody2">
<span class="font">中间</span></div>
<div class="webbody3">
<span class="font">右边</span></div>
</div>
<div class="footer">
<!-- 页尾 -->
<span class="font">页尾</span></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: #
.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%就那个都可以了。不同浏览器对它们的识别还是不同的。
上述例子打包下载
![优秀房地产楼书设计欣赏[时代庄园]](/uploadfile/art/uploadfile/200807/20080703113157494.gif)
