欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

热门阅读

DIV布局和TABLE布局的区别

创建时间:2011年07月12日 22:26  阅读次数:(6396)
分享到:

DIV布局和TABLE布局的区别传统TABLE布局方式实际上是利用了HTMLtable表格元素具有的无边框特性,由于table元素可以在显示时使得单元格的边框和间距为0,即不显示边框,因此可以将网页中的各个元素按版式划分放入表格的各个单元格中,从而实现复杂的排版组合。 表格布局的代码最常见的是在HTML标签之间嵌入一些设计代码,如w
-
DIV布局和TABLE布局的区别传统TABLE布局方式实际上是利用了HTML table表格元素具有的无边框特性,由于table元素可以在显示时使得单元格的边框和间距为0,即不显示边框,因此可以将网页中的各个元素按版式划分放入表格的各个单元格中,从而实现复杂的排版组合。
    表格布局的代码最常见的是在HTML标签之间嵌入一些设计代码,如width=100%,border=0等。表格布局的 混乱代码就是这样编写的,大量样式年设计代码混杂在表格,单元格中,使得可读性大大降低,维护起来成本也相当高,尽管有类似于Dreamweaver(以下简单称dw)这样可视化的界面进行编写,只要你需要什么,他帮你写入什么样式,最终结果是表格中到处留下设计的足迹,混合式代码也由此而成。
    DIV可以理解成一个块,是有个比表格简单的元素,从语法上只有<div></div>这样简单的定义。DIV最大的好处就是样式是由CSS来控制。
但总体上而言:
1. div+css布局比table布局节省页面代码,代码结构也更清晰明了.
2. div+css的页面对搜索引擎支持好,而且速度更快了,能够比table 更加快速的显示网站内容.
3. div+css布局使网站版面布局修改变的更简单,因为版面代码都写在独立的css文件里修改起来方便多了,不象table要在页面中修改很多信息.
 
页面中:
<div class=\"style2\"></div>  //表示调class名为style2的样式
也可以这样写
<div id=\"style2\"></div>  不过CSS表示就有所不同了

CSS中  
       .style2{
       width: 800px; //宽度
       height: 100%; //高度
       margin: 0px auto; //页面边距离,如 margin-top:10px 表示上边距为10像素,这里是为自动
       margin-bottom:20px;  //下边距
       border:1px solid #9BDF70;   //边框 
       background-color: #F0FBEB  //背景色
       }
 (在样式指定为div id=的时候必须这样写)
       #style2{……

不够,第一种写法明显可以提高代码重用率

`齹詋儚NKm諎'
来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 29+51=? 的结果(结果是:80)
结  果: