css大全

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的不同定义，显示在任何地方，任何网络设备上。

对于结构的理解大体可以类似表示：

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属性来定位。