Div+CSS布局大全目录第1章制作网页整体布局思想的转变 (4)1.1思想的转换 (4)1.2良好代码的要求 (4)1.3Css替换html总结 (4)第2章XHTML下css+div布局总结 (6)2.1DOCTYPE (6)2.2XMLns (6)2.3声明编码语言 (7)2.4用小写字母书写所有标签 (7)2.5为图片添加alt属性 (7)2.6给所有属性值加引号 (7)2.7关闭所有的标签 (7)2.8收藏夹小图标 (8)2.9为搜索引擎准备的内容 (8)第3章调用样式表 (9)第4章XHTML代码规范 (10)4.1所有的标记都必须要有一个相应的结束标记 (10)4.2所有标签的元素和属性的名字都必须使用小写 (10)4.3所有的XML标记都必须合理嵌套 (10)4.4所有的属性必须用引号""括起来 (10)4.5把所有<和&特殊符号用编码表示 (10)4.6给所有属性赋一个值 (10)4.7不要在注释内容中使“--” (11)第5章CSS入门 (12)5.1基本语法规范 (12)5.2颜色值 (12)5.3定义字体 (12)5.4群选择器 (12)5.5派生选择器 (13)5.6id选择器 (13)5.7类别选择器 (13)5.8定义链接的样式 (13)5.9缩写是按照顺时针的顺序 (13)5.10行高 (14)5.11制作好的网站可以到w3c进行标准校正 (14)第6章CSS布局入门 (15)6.1定义DIV (15)6.2CSS2盒模型 (16)6.3辅助图片一律用背景处理 (16)第7章第一个CSS布局实例 (17)7.1确定布局 (17)7.2定义body样式 (17)7.3定义主要的div (17)7.4100%自适应高度 (17)第8章不用表格的菜单 (19)8.1不用表格的菜单(纵向) (19)8.2不用表格的菜单(横向) (20)第9章校验及常见错误 (21)第10章CSS布局技巧和兼容方案 (23)10.1使用css缩写 (23)10.2明确定义单位，除非值为0 (23)10.3区分大小写 (23)10.4取消class和id前的元素限定 (23)10.5.默认值 (23)10.6不需要重复定义可继承的值 (24)10.7最近优先原则 (24)10.8多重class定义 (24)10.9使用子选择器(descendant selectors) (24)10.10不需要给背景图片路径加引号 (25)10.11组选择器(Group selectors) (25)10.12用正确的顺序指定链接的样式 (25)10.13清除浮动 (26)10.14横向居中 (26)10.15针对IE的优化 (26)10.16调试技巧：层有多大 (27)10.17CSS代码书写样式 (27)第1章制作网页整体布局思想的转变1.1思想的转换我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。
然后我们用Photoshop或者Fireworks画出来、切割成小图。
最后再通过编辑HTML 将所有设计还原表现在页面上。
如果你希望你的HTML页面用CSS布局，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
外观并不是最重要的。
一个结构良好的HTML页面可以以任何外观表现出来。
HTML不仅仅只在电脑屏幕上阅读。
你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。
但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
对于结构的理解大体可以类似表示：<div id=”container”></div><div id=”header”></div><div id=”globalnav”></div><div id=”subnav”></div><div id=”search”></div><div id=”content”></div><div id=”footer”></div>1.2良好代码的要求良好结构的HTML页面内几乎没有表现属性的标签代码非常干净简洁。
1.3Css替换html总结1.align="left"align="right"---------------------float:left;float:right;当你使用float属性，必须给这个浮动元素定义一个宽度。
2.使用CSS,margin,padding,border可以设置在任何元素上,不仅仅是body元素.更重要的，你可以分别指定元素的top,right,bottom和left值。
3.vlink="#333399"alink="#000000"link="#3333FF"---------------a:link#3ff;a:visited:#339;a:hover:#999;a:active:#00f。
4.background-color:#fff;在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。
5.cellspacing="3"---------------------border-width:3px;用CSS，你可以定义table的边框为统一样式，也可以分别定义top,right,bottom and left边框的颜色、尺寸和样式。
你可以使用table,td or th这些选择器.如果你需要设置无边框效果，可以使用CSS定义：border-collapse:collapse;6.clear:left;clear:right;clear:both;许多2列或者3列布局都使用float属性来定位。
如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性.7.text-align:center;Text-align只适用于文本.第2章XHTML下css+div布局总结xml(extensible Markup Language)的出现，结构化文档和数据有了一个通用的、科适应的格式，不仅仅应用在web上，也可以应用在任何地方。
标准称为可能。
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。
在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。
它实现HTML向XML的过渡。
CSS是Cascading Style Sheets层叠样式表的缩写。
纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
2.1DOCTYPEDOCTYPE是document type的简写。
主要用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。
DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。
XHTML1.0提供了三种DOCTYPE可选择：1)过渡型（transitional）<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">2)严格型（strict）<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">3)框架型（frameset）<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0Frameset//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。
框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。
在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。
2.2XMLns名字空间（Namespace）直接在DOCTYPE声明后面添加如下代码：<html XMLns="/1999/xhtml">，namespace声明允许你通过一个在线地址指向来识别你的namespace。
由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。
当文件交换或者共享的时候就容易产生错误。
为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。
更通俗的解释是：名字空间就是给文档做一个标记，告诉别人，这个文档是属于谁的。
只不过这个"谁"用了一个网址来代替。
2.3声明编码语言为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。
代码如下：<meta http-equiv="Content-Type"content="text/html;charset=GB2312"/>这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。
但是要补充说明的是，XML文档并不是这样定义语言编码的，XML的定义方式如下：<?xml version="1.0"encoding="gb2312"?>这也是W3C推荐使用的定义方法。
那为什么我们不直接采用这种方法呢？原因是一些浏览器对标准的支持不完善，不能正确理解这样的定义方法，比如IE6/windows。