本书通过项目案例来讲解DIV+CSS布局设计的基本思想、方法和解决实际问题的技巧，培养学习者网页布局分析、设计、套用的能力和良好的网页布局设计习惯。本书打破传统的教材组织形式，强化CSS布局设计，由简单初步布局到真实项目实战布局，以网页布局设计体验（结构与表现分离）→CSS的实战基础→DIV布局与CSS定位→文栏位落与列表的套用→背景与图片的套用→表格与表单的样式套用→超连结与导航栏的样式套用→CSS控制其他元素的显示为主线划分为8个模组；最后，对CSS 3.0新技术套用作了介绍，通过完成一个具有代表性的部落格实例和一个企业网站实例项目实战，完整地实施CSS页面布局，以提高读者综合解决问题的能力。 本书适合作为高职高专院校计算机类专业学生学习网页设计的教材，也适合从事网页设计的人员参考学习。

模组1网页布局设计体验/1

1.1CSS网页1

1.1.1什幺是CSS1

1.1.2Web标準1

1.1.3网页结构与表现分离实例2

1.2编写CSS布局的XHTML3

1.2.1一个简单的XHTML页面实例4

1.2.2XHTML编写的规範4

1.2.3CSS网页的编辑6

1.2.4CSS的使用注释7

1.2.5製作一个简单的CSS实例7

1.3CSS控制的页面8

1.3.1CSS的引入8

1.3.2行内样式8

1.3.3内嵌式调用CSS样式的实例8

1.3.4连结外部CSS样式的实例9

1.3.5导入外部样式10

拓展实践10

习题11

模组2CSS的实战基础/13

2.1CSS的基本语法13

2.1.1CSS语法的格式13

2.1.2CSS的取值单位14

2.2基本CSS选择符15

2.2.1标籤选择符15

2.2.2类选择符16

2.2.3ID选择符17〖2〗〖3〗〖4〗2.3灵活使用CSS选择符19

2.3.1分组选择符及实例19

2.3.2通配选择符20

2.3.3包含选择符及实例20

2.3.4选择符嵌套及实例21

2.3.5标籤指定选择符22

2.3.6伪类选择符22

2.4CSS继承套用的实例23

2.5CSS样式和选择符优先权24

2.5.1CSS样式的优先权原则24

2.5.2CSS样式的优先权24

2.5.3CSS选择符的优先权实例25

拓展实践26

习题27

模组3DIV布局与CSS定位/30

3.1盒子模型30

3.1.1盒子模型的概念30

3.1.2padding、margin、border设定实例31

3.1.3盒子模型尺寸的计算35

3.1.4盒子外边距合併实例36

3.1.5块级元素与行内元素38

3.2页面定位技术39

3.2.1CSS定位机制39

3.2.2浮动定位问题39

3.2.3清除浮动42

3.3CSS定位属性45

3.3.1相对定位45

3.3.2绝对定位47

3.3.3固定定位47

3.4CSS布局技术48

3.4.1CSS布局理念48

3.4.2一列固定宽度居中49

3.4.3一列自适应宽度居中50

3.4.4二列固定宽度居中50

3.4.5二列自适应宽度居中51

3.4.6CSS高度自适应52

3.4.7溢出内容overflow属性54

3.5三列布局实例——唐诗《黄鹤楼》画卷54

拓展实践56

习题57

模组4文栏位落与列表的套用/60

4.1CSS文字样式60

4.1.1字型60

4.1.2文字大小62

4.1.3颜色63

4.1.4样式64

4.2文本对齐64

4.2.1CSS的文本属性64

4.2.2文本添加修饰实例64

4.2.3文本居中排列实例65

4.2.4製作Google公司Logo实例66

4.2.5首字下沉图文混排实例66

4.3CSS列表样式68

4.3.1列表的类型68

4.3.2CSS的列表属性69

4.3.3List图文混排70

4.3.4竖排唐诗文字71

拓展实践72

习题73

模组5背景与图片的套用/76

5.1页面的背景图76

5.1.1背景颜色与背景图片76

5.1.2前景图与背景图76

5.2图片样式77

5.2.1CSS图片框线77

5.2.2图片对齐方式80

5.2.3图文混排效果81

5.3背景图片的套用实例82

5.3.1背景渐变效果实例83

5.3.2导航按钮实例84

5.3.3横格信纸实例85

5.4CSS样式圆角布局研究86

5.4.1以四角小图实现圆角效果实例87

5.4.2以画线方式实现圆角效果实例88

5.4.3多图片组合布局圆角效果实例90

5.5背景图片的CSSSprite技术91

拓展实践93

习题94

模组6表格与表单的样式套用/96

6.1表格控制96

6.1.1表格标记96

6.1.2表格隔行变色实例100

6.1.3滑鼠经过时变色的表格实例102

6.2表单控制103

6.2.1表单标记104

6.2.2登录框表单的套用实例107

6.2.3网民调查问卷实例109

拓展实践111

习题113

模组7超连结与导航栏的样式套用/116

7.1超连结CSS样式116

7.1.1定义超连结CSS样式116

7.1.2浮雕式超连结的效果118

7.2超连结製作导航栏120

7.2.1CSS样式实现垂直导航栏121

7.2.2利用背景图片製作立体导航选单122

7.2.3製作带下拉子选单的导航选单124

拓展实践127

习题127

模组8CSS控制其他元素的显示/130

8.1CSS静态滤镜130

8.1.1透明度滤镜131

8.1.2模糊滤镜132

8.1.3透明色滤镜133

8.1.4投射阴影滤镜134

8.1.5对称变换滤镜135

8.1.6光晕滤镜136

8.1.7灰度滤镜137

8.1.8反色滤镜138

8.1.9遮罩滤镜139

8.1.10阴影滤镜140

8.1.11X射线滤镜141

8.1.12波浪滤镜141

8.1.13一个使用颜色渐变滤镜的实例142

8.2控制滚动条的显示143

8.2.1滚动条样式的属性144

8.2.2控制滚动条样式的实例144

8.3CSS布局中的兼容问题145

8.3.1兼容问题的由来145

8.3.2兼容问题的解决146

8.3.3一个关于浏览器显示差异的实例147

拓展实践149

习题150

模组9CSS3.0的新技术与套用/152

9.1CSS3.0简介152

9.1.1CSS3.0技术的发展152

9.1.2CSS3.0中的新特性152

9.2进入CSS3.0样式新世界153

9.2.1用CSS3.0实现圆角效果实例153

9.2.2CSS3.0框线、阴影实例154

9.2.3CSS3.0文本描边及阴影效果实例155

9.2.4CSS3.0表格美化效果实例156

9.2.5CSS3.0按钮动画过渡效果实例157

9.2.6CSS3.0多列布局排版实例158

拓展实践159

习题161

模组10製作个人部落格页面/162

10.1构架设计製作162

10.1.1功能需求分析与界面设计162

10.1.2页面结构的规划162

10.1.3切割网页的效果164

10.1.4页面主体框架内容166

10.2製作页面内容167

10.2.1製作页面头部Banner的内容与导航167

10.2.2製作页面导航左侧列表169

10.2.3製作页面主体内容部分173

10.2.4製作页面底部内容178

10.3页面细节整体调整179

10.4页面的浏览与兼容测试180

拓展实践182

习题183

模组11企业网站製作/184

11.1企业网站构架184

11.1.1功能需求分析与界面设计184

11.1.2页面结构的规划185

11.1.3切割网页效果图185

11.1.4页面主体框架内容187

11.2製作页面内容187

11.2.1製作Banner内容与导航187

11.2.2製作页面左侧列表189

11.2.3製作页面主体内容191

11.2.4製作页面图片展示192

11.2.5製作页面底部内容193

11.3页面细节整体调整194

11.4页面的浏览与兼容测试194

拓展实践195

习题196

附录CSS常用属性/197

参考文献/203