试谈div.docVIP

浅谈Div+Css网页布局 前言 绪论 Div+Css技术概述 DIV+CSS是网站标准（或称“WEB标准”之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。CSS—层叠样式表（Cascading Style Sheets），用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。你有时候可能用打开一些网站后发现 网页都错位 不整齐 乱七八糟的挡着 或者有些都跑到框子外头去了 这就说做网站的时候 div+css 布局没做周全 Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 p/p 是一样的。DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascADIng style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。”main” div id=”header”头部内容/div div id=”center” div class=”cent_left”中部居左内容/div div class=”cent_right”中部居右内容/div /div div id=”footer”底部版权内容/div /div 注意以上代码缩进-父级与子级有相对缩进。一般缩进4个空格字符半角英文位置。 2.2.2 Css书写格式 好的Css书写格式能给你带来维护和制作上的方便。可以分析CSS命名的选择器之间的关系。 #main{… …} #main #header{… …} #main #centen{… …} #main #footer{… …} #centen.cent_left{… …} #centen.cent_right{… …} 以上花括号内值省略不讲。这里主要是CSS派生关系，不同区域DIV块以空一行隔开。 CSS格式还有 #main{ … … } #main #header{ … … } #main #centen{ … … } #main #footer{ … … } #centen.cent_left{ … … } #centen.cent_right{ … … } 一般不推荐CSS的花括号分别占一行排列CSS选择器。同时这样会大大增加占用CSS文件内行数，维护也不好辨认。 Div+Css技术的优劣 Div+Css的优势 随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，而从实际应用情况来看，此种方法绝对好于表格制作页面的方法。具体优势体现在如下方面：1、修改设计时更有效率　　由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。2、更好地被搜索引擎收录由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。3、使页面载入得更快　　由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。4、对浏览者和浏览器更具亲和力　　我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。5、降低流量费用　　页面体积变小，浏览速度变快，这就使得对于某些控