CSS+DIV网页重构对比TABLE显著优势

采用CSS+DIV对网站重构日趋被大家重视起来了,尤其是大型站点,就在今天下午,IT168首页改版就选择了这种做法。其实,早些时候像阿里巴巴、163等大型门户站点就已经完成了重构工作。 Robin 早在去年就已经有了使用CSS+DIV来编写网页源码的习惯了,个人感觉这种方法确实比传统的TABLE形式的源码架构强多了。

采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势:

1:表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。

2:提高搜索引擎对网页的索引效率

用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价。

3:提高页面浏览速度

对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。

4:易于维护和改版

你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

从以上的描述来看,采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。

时间: 2024-11-10 10:34:17

CSS+DIV网页重构对比TABLE显著优势的相关文章

CSS+DIV网页重构对比TABLE布局的显著优势

采用CSS+DIV对网站重构日趋被大家重视起来了,尤其是大型站点,就在今天下午,IT168首页改版就选择了这种做法.其实,早些时候像阿里巴巴.163等大型门户站点就已经完成了重构工作. Robin 早在去年就已经有了使用CSS+DIV来编写网页源码的习惯了,个人感觉这种方法确实比传统的TABLE形式的源码架构强多了. 采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势: 1:表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息.

精通CSS+DIV网页样式与布局--图片效果

        提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:         精通CSS+DIV网页样式与布局--初探CSS        精通CSS+DIV网页样

精通CSS+DIV网页样式与布局--初探CSS

        CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."D

网页设计之css+div PK table+css

css|设计|网页|网页设计 用过div+CSS作个整个网站,如果是纯粹的div的布局是比较麻烦的,尤其是你div里面嵌套div的,div布局的时候,你有些页面效果还是要舍弃一点的,比如图片的圆角,这些如果套div比较麻烦,在一个div在VS2005设计器里面可能变形,如果过多的套div,你实现Ajax拖动效果的时候比较麻烦,所以我觉得眼下还是div+嵌套table比较好. 圆角--可以用div+css做出一样漂亮的圆角,而且不用图片,而且是宽度.高度自适应的 怎么实现?挖挖Google Tal

CSS+div网页制作PS切图攻略

认识Photoshop(PS)CSS切图必用工具 Adobe PHOTOSHOP平时我们又被称为PS.   div CSS必备切图工具PS截图 多数人对于PHOTOSHOP的了解仅限于"一个很好的图像编辑软件",并不知道它的诸多应用方面,实际上,PHOTOSHOP的应用领域很广泛的,在图像.图形.文字.视频.出版各方面都有涉及. 请看下面介绍: 平面设计 平面设计是PHOTOSHOP应用最为广泛的领域,无论是我们正在阅读的图书封面,还是大街上看到的招帖.海报,这些具有丰富图像的平面印刷

精通CSS+DIV网页样式与布局--制作实用菜单

        在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括:项目列表.无需表格的菜单.菜单的横竖装换,看下面一张思维导图:                    首先,我们看项目列表,列表的符号,我们来看例子代码和运行效果:           <span style="font-size:18px;"><spa

精通CSS+DIV网页样式与布局--CSS段落效果

        在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示效果.首先,我们来看一张导图:                   接下来,小编会随着上图所示的脉络,对CSS段落设置进行相关简单的介绍,首先我们来看CSS段落设置中的对齐效果:        对齐效果        水平对齐方式        首先,我们来看一段水平对齐方式的代码以

精通CSS+DIV网页样式与布局--页面和浏览器元素

        在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动条.首先我们来看一张思维导图:                  接着,小编会跟随上述思维导图的足迹,慢慢探寻,丰富的超链接特效中,我们首先来介绍动态超链接,我们来看一下例子的代码和运行的效果:          动态超链接 <span style="font-size:18p

精通CSS+DIV网页样式与布局--设置表单和表格

        表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预览一下该博文主要讲解哪些CSS的基础知识:                   首先我们的首先表格中的标记,代码和运行效果如下所示:          <span style="font-size:18px;"><html> <head>