DIV+CSS布局

页面布局一般有三种方式:

  1. 表格布局
  2. 框架布局
  3. DIV+CSS布局

当中。DIV+CSS布局符合W3C标准,眼下已成为网页布局主流。

   <div>标签的主要作用是用于设定文字、图片、表格等的摆放位置。

当把文字。图片等放在<div>标签中时,该标签被称为“DIV块”或“DIV元素”或“DIV层”。 

使用CSS和DIV能够非常好的解决图像或文字定位的难题,通过DIV和CSS结合使用,网页设计人员能够精确的设定内容的位置,还能够将定位的内容上下叠放。 使用DIV+CSS布局,可先先将页面内容的语义或结构确定下来而不是先考虑外观。

一个结构良好的XHTML页面能够通过CSS以随意外观表现出来。

CSS布局能实现真正意义上的结构和外观的分离,与传统的TABLE网页布局相比,具有下面4个显著优势

1、表现和内容相分离。

将设计部分剥离出来放在一个独立样式文件里,XHTML文件里仅仅存放文本信息。
2、提高搜索引擎对网页的索引效率。用仅仅包括结构化内容的XHTML取代嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价。


3、提高页面浏览速度。对于同一个页面视觉效果,採用DIV+CSS重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般仅仅有后者的1/2大小。

给用户最直观的体验就是网页打开速度快了非常多,能给用户更好的体验。
4、易于维护和改版。你仅仅要简单的改动几个CSS文件就能够又一次设计整个站点的页面。   

 利用DIV和CSS的定位技术进行网页的布局是如今主流的页面布局模式,是TABLE页面布局的替代技术。採用CSS+DIV布局的页面容量要比用TABLE布局的页面文件小非常多,前者一般仅仅有后者的1/2大小,节省了大量的带宽,同一时候减少了站点改版的成本。W3C组织提供对CSS代码的验证服务,地址在:
http://jigsaw.w3.org/css-validator/

posted @ 2019-03-21 15:55  ldxsuanfa  阅读(187)  评论(0编辑  收藏  举报