电脑软硬件应用网
当前位置： 电脑软硬件应用网 > 设计学院 > 网络编程 > XML与XHTML教程 > 正文
XHTML布局使用说明书--三列布局
XHTML布局使用说明书--三列布局
2007-8-27 11:03:36　　文/转载 　　出处:电脑软硬件应用网 　　
     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 "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- 导入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: #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%就那个都可以了。不同浏览器对它们的识别还是不同的。
  • 上一篇文章：

  • 下一篇文章：
    • 最新热点 最新推荐 相关文章
    XML的四种解析器原理及性能比较
    使用jquery的ajax解析xml的例子
    详解相互转换JSON-lib包的相关介绍
    教你使用quickwap的xml查询农历信息
    XML HTTP Request的属性和方法简介
    ASP生成XML数据文档的方法
    示范如何把XML读取数据放到内存
    使用DOM的技巧和诀窍总结
    兼容firefox与ie操作XML节点处理方法
    示例：asp读取xml文件的方法
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号