DIV布局和Table布局的区别

本文和大家重点讨论一下DIV布局和Table布局的区别,DIV可以理解成一个块,是有个比表格简单的元素,从语法上只有

这样简单的定义。

成都创新互联自2013年起,是专业互联网技术服务公司,拥有项目成都网站设计、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元广平做网站,已为上家服务,为广平各地企业和个人服务,联系电话:18980820575

DIV布局和Table布局的区别

传统Table布局方式实际上是利用了HTMLTable表格元素具有的无边框特性,由于Table元素可以在显示时使得单元格的边框和间距为0,即不显示边框,因此可以将网页中的各个元素按版式划分放入表格的各个单元格中,从而实现复杂的排版组合。

表格布局的代码最常见的是在HTML标签之间嵌入一些设计代码,如width=100%,border=0等。表格布局的混乱代码就是这样编写的,大量样式年设计代码混杂在表格,单元格中,使得可读性大大降低,维护起来成本也相当高,尽管有类似于Dreamweaver(以下简单称dw)这样可视化的界面进行编写,只要你需要什么,他帮你写入什么样式,最终结果是表格中到处留下设计的足迹,混合式代码也由此而成。

DIV可以理解成一个块,是有个比表格简单的元素,从语法上只有

这样简单的定义。DIV***的好处就是样式是由CSS来控制。

但总体上而言:

1.DIV+CSS布局比Table布局节省页面代码,代码结构也更清晰明了.

2.DIV+CSS的页面对搜索引擎支持好,而且速度更快了,能够比Table更加快速的显示网站内容.

3.DIV+CSS布局使网站版面布局修改变的更简单,因为版面代码都写在独立的css文件里修改起来方便多了,不象Table要在页面中修改很多信息.

页面中:

 
 
 
//表示调class名为style2的样式。  
  •  
  • 也可以这样写 

     
     
     
    不过CSS表示就有所不同了。  
  •  
  • CSS代码: 

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

    ***种写法明显可以提高代码重用率。

    网站栏目:DIV布局和Table布局的区别
    网站地址:http://www.36103.cn/qtweb/news47/30897.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    域名注册知识

    同城分类信息