整理的css资料.docVIP

整理的css资料（div布局）Web标准在国内的逐渐普及及很多业内人士的大力推行，很多网站已经开始重构。Web标准提出将网页的内容和表现分离，同时要求HTML文档具有良好的结构。因此需要抛弃传统的表格（table）布局方式，采用DIV布局，并且使用CSS层叠样式表来实现页面的外观。 一、table布局的局限性 传统table布局实际上利用了HTML中table表格元素具有的边框、间距、填充等属性，进行页面的版式设计，将网页中的各个元素按版式划分放入表格的各个单元格中，从而实现复杂的排版组合。 表格布局的代码最常见的是在HTML标签之间加入一些设计代码，如width=”100%”，border=”0”等，表格布局的混合代码就是这样编写的。 大量样式设计代码混杂在表格和单元格之中，使得可读性大大降低，维护成本大大提高。复杂的表格设计使得设计极为不易，修改更加复杂，最后生成的网页代码除了表格本身，还有许多没有意义的冗余代码，文件量庞大，最终导致浏览器下载及解析速度变慢。 使用CSS布局从根本上改变了这种情况。CSS布局的重点不再放在table元素的设计中，取而代之的是HTML中的另一个元素DIV。在设计时，页面首先在整体上进行div标签的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。通过CSS排版的页面，更新十分容易。 二、将页面用div分块 CSS排版要求设计者首先对页面有一个整体的框架规划，包括整个页面分为哪些模块，各个模块之间的父子关系等。以简单的页面为例，页面有LOGO和banner（header）、内容部分（pagebody）和页脚（footer）几个部分组成，各部分分别用不同的ID来标识，整个页面如图所示。对于每个模块还可以再嵌套各种块元素或行内元素，例如内容部分，可以在划分为边栏和主体内容，如图所示。 通常采用div将这些结构定义出来，THML代码如下。 div id=container此处显示 id container 的内容 div id=header此处显示 id header 的内容/div div id=pagebody此处显示 id content 的内容 div id=sidebar此处显示 id sidebar 的内容/div div id=content此处显示 id content 的内容/div /div div id=footer此处显示 id footer 的内容/div /div 在Dreamweaver的设计视图下，显示如图所示。 当页面的整体结构确定后，就可以根据内容考虑页面的整体版型。 三、常见版型设计 1．“匡”字型网页 “匡”字型网页结构如图所示。 根据结构图，编写HTML文档，结构图中的每部分都用一个div来实现，div可以包含任何内容块，也可以嵌套另一个div。下面是图6-17结构图所对于的HTML代码。 body !—网页主体-- div id=container !--页面层容器-- 　 div id=header !--页面头部-- 　　 /div 　　 div id=pagebody !--页面主体-- 　　　　 div id=sidebar !--侧边栏-- 　　　　 /div 　　　　 div id=content !--主体内容-- 　　　　 /div 　　 /div 　　 div id=footer !--页面底部-- 　　 /div /div /body 以上是页面的结构部分。然后用CSS定义样式。下面给出的是部分样式代码。 #container { width:800px; /*设定宽度*/ margin:10px auto /*设定上下边界距，左右居中*/ } #header { background:url(logo.gif) no-repeat /*加入背景图片，不重复*/ } #pagebody { width:730px; /*设定宽度*/ margin:8px auto; /*设定上下边界距，左右居中*/ } #sidebar { width:160px; /*设定宽度*/ float:left; /*浮动居左*/ clear:left; /*不允许左侧存在浮动*/ overflow:hidden; /*超出宽度部分隐藏*/ } #content { width:570px; /*设定宽度*/ float:right; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden /*溢出隐藏*/ } 2．“国”字型