Notice网站公告
Solution解决方案
DIV CSS技术首页 > 知识中心 > DIV CSS技术 >

DIV+CSS布局

   div+css是一种网页布局的方法,这种网页布局方法和传统的HTML网页设计语言表格(table)的定位方式不同,它可以实现页面内容与表现相的分离。就是用div+css布局网页后,会使得页面内容(div)和表现(css)分离,这样有利于用户的体验,精简代码。布局中,div承载的是内容,css承载的是样式。

  CSS+DIV相对与传统的TABLE网页布局的优势:
  1. 网页设计和网站内容可以分离 。
  把设计部分分离出来放在独立样式的(CSS)文件里,HTML文件中用来存放网站的内容。
  2. 提高搜索引擎对网页的索引效率。
  结构化内容的HTML替代嵌套标签,会使的搜索引擎更假有效地搜寻到网页内容。
  3. 提高页面浏览速度。
  采用CSS+DIV设计的页面容量会比TABLE编码的页面语法少的多。
  4. 容易维护和改版。
  简单的修改CSS文件就可以重新设计整个网站的页面。
  从上面的描述来看,采用CSS+DIV可以提升网站用户与搜索引擎的友好度。CSS+DIV不仅符合W3C标准,而且通过采用CSS+DIV,网页程序会好操作。
  从SEO的角度来分析:
  DIV+CSS符合W3C标准。而网站符合W3C标准,是搜索引擎给网页排名的一个影响因素。DIV+CSS使网站的原始码变的简单,几乎除了ul,div,dd,之类的标签外,不再用其他标签,网站的内容完全裸露在搜索引擎面前,便于抓取网页关键内容,从而加强关键内容页面的比重,关键词更容易阅读到了。网站一般都是左中右三栏式,页面的主要内容是在中栏,关键词搜寻页面内容是按照从上到下,从左到右进行的,如果你的左栏内容比较多,内容的关键词搜寻就会下降。而DIV+CSS可以把主要内容先写在前面,再写左栏,右栏,通过CSS定位就可以了。对于表格布局想改布局,可能就要动全部,而DIV+CSS可以很轻松的改变网站的表现。
  DIV+CSS一般布局方式为头部,主体,尾部,有点类似于word文档的页眉,文档,主体,页脚的分布。大致是这样:
  <div class="header">头部一般是网站导航/logo</div>
  <div class="main">主体一般有左右结构,左中右结构和通栏结构</div>
  <div class="footer">尾部一般为版权说明,网站备案号,网站地图,网站统计,联系方式之类的内容</div>
  DIV+CSS布局中最重要不是设置,而是写的代码要实现大部分浏览器的兼容问题在一般情况下,要按照标准的代码写规范,不要冲突,计算准确,那么通常是不会出问题的。
 
北京网站建设公司
网林时代:北京网站建设专业机构,10年建站经验,服务客户1000多家!
网址:www.awanglin.net www.awanglin.com 点击浏览经典案例