您现在的位置： 万盛学电脑网 >> 程序编程 >> 网络编程 >> 安卓开发 >> 正文
XHTML布局的三列布局
作者：佚名 责任编辑：admin 更新时间：2022-06-22
xhtml是对html语言的发展，在近几年被热炒的概念web2.0里面，这个进化了的网页制作技术，也一直受到追捧。有些人把它叫做div+css。这样叫也无可厚非。但是严格来说它是一个网页的标准。新的标准自然有它的好处，div+css是它的具体做法。这种做法，使得页面看起来简洁，div设计了网页的骨架，css像是衣服，装饰了它。而避免使用传统的table的布局带来的麻烦，如果用table布局经常会带来很多tr,td的标签，不写还不对，写了还乱下面我们就给大家介绍一下XHTML布局吧！
下面我们来具体的看一个三列布局的例子，
页眉
左边
中间
页尾
我们将网页分为上中下三块，中间的一块在横着分为左中右三快。每一块用一个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 "-//W3C//DTD xhtml 1.0 Transitional//EN" "-transitional.dtd">
<!-- 导入dtd文件如果用xhtml的话必须有这句 -->
<!-- 命名空间 -->
<html lang="zh" xml:lang="zh" xmlns="">
<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" type="text/css" media="screen,projection" />
</head>
<body>
<div class="head">
<!-- 页眉 -->
<div class="headcotent">
<span class="font">页眉 <a 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: #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%就那个都可以了。不同浏览器对它们的识别还是不同的。
以上就是我们给大家介绍的html5移动开发了。希望大家继续关注我们的网站！
- 上一个程序编程： HTML组件三最顶级页面的设置方法
- 下一个程序编程： HTML5预加载的方法
