div+css的布局较table布局有什么优点

html-css015

div+css的布局较table布局有什么优点,第1张

table 更多面向数据表格,而且tr、td属性控制起来也没有div容易灵活多变(table布局随时面临合并单元格,一格高、宽发生变化,其他格也跟着受累)。div+css可定位可浮动,可排序,再者div+css会让代码更具可读性,想想布满编辑器的table、tr、td标签,你能分得清哪里是哪里吗!

优点总结起来就是:DIV+CSS让布局灵活易控,代码清晰易读。

导读(内容太多了- -!):

第一部分,你可以去看看使用CSS的华丽效果,用table做不到的哦

第二部分,这是我自己的总结,比较片面,不过那个例子应该很好懂

第三部分,网上搜索到的总结,全面,我能看懂得部分加了点小备注

第一部分:

有一个网站叫CSS禅意花园(链接见参考资料,英文网站,点击select a design下面的超链接可以切换CSS),网站只有一个HTML页面,但是有几百个CSS文件,点击超链接可以切换该网页使用的CSS文件。切换了CSS后页面的样子完全变了,变成另外一个迥然不同的风格,文字的位置也全部发生了变化。你看了以后就知道DIV+CSS的好处了。。

如果像以前那样用table来排版,想要做出这种完全不同的风格你就只能重新写HTML。

第二部分:

从网页美工和网站维护人员的角度(因为我是做这个的- -!)来说,使用css:

1、便于页面的修改。

2、便于页面风格的统一。

3、减少网页的体积。

举例:

假设你有100个页面,每个页面的风格都是一样的,里面都有10个表格。

如果你全部用html来做,就需要给所有的页面的表格里写表格的边框颜色、背景颜色、文字大小(假设这些外观代码要使用3行),那么你就要给1000个表格写这些东西(你就要写3000行。。)。这里面所有的外观设置都是重复的。以后你打算改变表格的风格,你就要改1000个表格。

但是如果你结合HTML和CSS来做,你就可以在每个页面上加上一句

<link href="table.css" rel="stylesheet" type="text/css"/>

然后在table.css这个文件里写上

table{

border:1px solid #ddd

background:#eee

font-size:12px

}

然后你这1000个表格就看起来都一样了。这里只需要写3行代码。

以后你要修改表格,只需要修改table.css里面的这3行代码。

第三部分:

从所有人的角度来说(这是我查到的。。),CSS的优点有:

1 缩减代码,提高页面浏览速度

2 结构清晰,对搜索引擎更加友好(貌似这就是楼上说的SEO)

3 支持各种浏览器,兼容性好(不同浏览器解析出来的样子一般是不一样的,一想到这个我就头大)

4 简单的修改,缩短修改时间(恩,这点我想到了)

5 强大的字体控制和排版能力(是的。。不需要一页一页去改字体,可以统统一起改,而且有行高、段前空白这些功能)

6 使用CSS可以结构化HTML,提高易用性

7 更好的扩展性(你可以在页面里引入多个CSS样式表,某个样式表是电脑专用,某个样式表是手机专用,某个样式表是打印的时候专用)

8 更灵活控制页面布局(表格控制布局就很死板啦,不能随便改来改去的)

9 内容和表现分离,干净利落(网页内容在HTML里,网页的样式内容在CSS里)

10 更方便搜索引擎收录,获得更高评价(貌似又跟SEO有关)

11 优化表结构

12 更快加载有图片的页面

1. css和div 开发的优势?

第一、利于搜索引擎蜘蛛爬行

根据总结和经验,div+css布局有利于蜘蛛的爬行,拿html的table布局和div+css布局的网页来做对比,很显然table的字节大于div+css的,字节小就有益于搜索引擎蜘蛛下载页面所用的时间,而且也有益于蜘蛛爬行到网站深处。

第二、易于修改

在一般情况下,div+css布局的网站,都是将html页面和css文件分开的,div+css的特点就是能将网页的内容和表现形式分离,所以,假如你要修改网站整站布局的话,一般只需要修改css文件里的的个别属性即可,而这种特点是table不具备的。

第三、减少网页加载时间

前面就提到过,div+css是将css文件和html文件分开的,当用户点击网站时,是在同时下载css文件和html文件,所以可以提高打开网页的速度,而table是必须以标签开始到结束才能显示网页内容,另外,div的html文件则是变加载边显示,这样是不是提高了用户体验?Google已经将网页加载速度列入了排名的因素,尽管这个因素只能影响排名的一小部分,甚至可以忽略,但是有利于seo的办法,我们为什么不用?

说完了优点那么现在就来说说缺点:

第一、开发技术高 众所周知,div+css要兼容各种浏览器,这样增加了div+css开发的难度。

第二、开发时间长 div+css布局相对于table布局来说,div+css的耗费时间要比table布局的时间长很多,另外考虑到浏览器兼容的问题,各种浏览器间的测试也是一个费时的事情。

第三、开发成本高 就上两点所说,高技术和长时间决定了他的成本。

2. 谈谈页面间的参数传递有哪些方式 ?

Session、Application、Cookies、<input type="hidden">标签