`

再谈DIVCSS网页布局的意义与副作用

阅读更多

 随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,而52CSS.com也立足于CSS网页布局技巧的普及,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。
  如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉,比较上手; 但是,它却阻碍了一种更好的,更有亲和力的,更灵活的,而且功能更强大的网站设计方法——DIV+CSS。  

CSS网页布局的意义体现在如下方面:  

一、使页面载入得更快  
  由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。 

二、降低流量费用  
  页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。 

三、修改设计时更有效率  
  由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。

四、保持视觉的一致性  
  DIV+CSS最重要的优势之一:保持视觉的一致性; 
  以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。 

五、更好地被搜索引擎收录  
  由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,便于被搜索引擎采集收录。 

六、对浏览者和浏览器更具亲和力  
  我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优势。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。 
说了这么多CSS网页布局的意义与优点,同时也不能轻视

CSS网页布局的副作用:  

  一、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了。  

  二、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。  

   三、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器 中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。  

  四、 DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化,甚至 不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格 布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构,内容,相关网站链 接等因素始终是网站优化最重要的指标。

分享到:
评论

相关推荐

    div+CSS网页布局的意义与副作用原因小结第1/2页

    以下是DIV+CSS布局方式的优势与存在的潜在副作用的详细解读。 首先,DIV+CSS布局方式在载入速度上有显著的优势。与传统的表格布局相比,DIV+CSS布局将页面分解为更小的部分,允许浏览器在加载时逐个区域加载,而...

    div+css布局大全

    在网页设计领域,`div+css`布局是一种广泛使用的页面构造技术,它使得网页结构更加清晰,样式与内容分离,提升了网页的可维护性和可扩展性。本资源包"div+css布局大全"包含了关于这一主题的详细资料,旨在帮助初学者...

    DIVCSS布局:CSS浮动float属性详解.doc

    浮动(float)属性是CSS布局中的一个关键特性,主要用于创建流式布局、多列布局以及解决元素定位问题。在传统表格布局中,我们依赖表格的对齐方式来组织内容,但在Web标准开发中,浮动属性成为了实现灵活布局的核心...

    CSS div布局需要注意的两点

    然而,浮动布局也经常会给布局带来一些意想不到的副作用。例如,后续的非浮动元素会围绕着浮动元素进行布局,而不是简单地在下方叠加。更严重的是,如果没有及时清除浮动,浮动元素下方的div可能会出现布局上的混乱...

    CSS使用BFC规则布局引发外层div包裹内层div的处理方法

    BFC(Block Formatting Context),...在创建BFC时,应考虑不同属性可能带来的副作用,选择最适合当前布局需求的样式。通过清除浮动或创建新的BFC,可以有效地解决布局中出现的问题,保证页面的布局效果符合设计预期。

    CSS 初学者常犯错误汇总

    - 理解`float`属性的工作原理及其可能带来的副作用。 - 学会使用`clear`属性或伪元素清除浮动,避免布局错位。 ##### 5. IE浏览器兼容性问题 **错误表现:** - 在IE浏览器下,浮动元素的宽度未设置导致布局出错。 ...

    css三种方法实现div在浏览器水平居中

    总结来说,对于大多数现代浏览器,首选方法是使用`margin: 0 auto`,因为它简单、兼容性好且不会带来额外的副作用。在需要兼容旧版IE时,可以考虑使用结合`body`的`text-align: center`的方法。而`position: ...

    DIV+CSS 清除浮动常用方法总结

    在实际开发中,推荐使用`clearfix`方法,因为它不仅兼容性好,还能避免对父元素的其他样式属性产生副作用。同时,随着CSS Flexbox和Grid布局的普及,这些新的布局模式也可以替代传统的浮动布局,从而更方便地处理...

    css入门笔记

    独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 &lt...

    CSS命名规范

    在网页开发中,CSS(层叠样式表)是不可或缺的一部分,它负责定义网页元素的样式和布局。随着项目的复杂度增加,一个合理且一致的CSS命名规范变得尤为重要。良好的命名规范不仅能提升代码的可读性和可维护性,还能...

    CSS初级学习手册.pdf

    盒子模型是CSS布局的基础,包括边框、内边距、外边距和内容。 - 边框:元素边框的设置。 - 内边距:元素内容与边框之间的距离。 - 外边距:元素与相邻元素之间的距离。 - 盒子模型的大小由边框、内边距和外边距共同...

    CSS教程:div设置float后高度不自动增加

    然而,当一个元素设置了`float:left`或`float:right`,它会脱离文档流,不再影响其同级元素的位置,同时也导致了一个副作用:父容器可能无法正确计算包含这些浮动元素的总高度。 这个问题的根源在于,浮动元素不会...

    CSS clear属性给float带来哪些影响

    7. 在现代的CSS布局中,为了更优雅的解决清除浮动的问题,也有使用诸如clearfix hack的方法,它通过伪元素选择器来清除浮动而不必添加额外的DOM元素。 通过以上知识点,我们可以了解到CSS的clear属性在处理浮动元素...

    html 边框靠边.pdf

    HTML边框靠边可以通过CSS的`float`属性轻松实现,但需要注意它可能带来的副作用,如父元素高度塌陷。理解并掌握这些定位技术对于构建响应式、灵活的网页布局至关重要。同时,要根据项目需求选择合适的定位策略,...

    display 属性规定元素应该生成的框的类型.pdf

    总之,`display`属性是CSS布局的核心,理解并熟练掌握它的各种值及其用法,是创建复杂和响应式的网页布局的关键。在不同的浏览器和版本之间进行兼容性测试和调整,也是确保代码广泛适用的重要步骤。

    清除浮动.pdf

    在CSS布局中,浮动元素(floats)是一个重要的概念,它允许元素脱离文档流并影响周围内联元素的排列,但不会影响块级元素的布局。然而,浮动元素的一个副作用是可能导致父容器高度塌陷,即当浮动元素的高度超出其父...

    CSS 实现绝对底部一个完美解决方案

    为了解决这个问题,许多CSS布局技巧应运而生,但它们往往伴随着一些副作用,比如窗口大小调整时的布局错位。 现在,我们来看这个相对完美的CSS绝对底部布局方案。其核心思想是利用负margin和绝对定位来实现。以下是...

    老生常谈css中float的用法

    然而,`float`的一个副作用是它会使元素脱离正常的文档流,导致包含它们的父元素无法根据它们的高度进行扩展。这就是为什么在示例中,当两个浮动`div`后面没有清除浮动时,`li`元素的高度无法正确计算,导致上下边框...

Global site tag (gtag.js) - Google Analytics