模块1 网页布局设计体验 1
1.1 CSS网页 1
1.1.1 什么是CSS 1
1.1.2 Web标准 1
1.1.3 网页结构与表现分离实例 2
1.2 编写CSS布局的XHTML 3
1.2.1 一个简单的XHTML页面实例 4
1.2.2 XHTML编写的规范 4
1.2.3 CSS网页的编辑 6
1.2.4 CSS的使用注释 7
1.2.5 制作一个简单的CSS实例 7
1.3 CSS控制的页面 8
1.3.1 CSS的引入 8
1.3.2 行内样式 8
1.3.3 内嵌式调用CSS样式的实例 8
1.3.4 链接外部CSS样式的实例 9
1.3.5 导入外部样式 10
拓展实践 10
习题 11
模块2 CSS的实战基础 13
2.1 CSS的基本语法 13
2.1.1 CSS语法的格式 13
2.1.2 CSS的取值单位 14
2.2 基本CSS选择符 15
2.2.1 标签选择符 15
2.2.2 类选择符 16
2.2.3 ID选择符 17
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.4 CSS继承应用的实例 23
2.5 CSS样式和选择符优先级 24
2.5.1 CSS样式的优先级原则 24
2.5.2 CSS样式的优先级 24
2.5.3 CSS选择符的优先级实例 25
拓展实践 26
习题 27
模块3 DIV布局与CSS定位 30
3.1 盒子模型 30
3.1.1 盒子模型的概念 30
3.1.2 padding、margin、border设置实例 31
3.1.3 盒子模型尺寸的计算 35
3.1.4 盒子外边距合并实例 36
3.1.5 块级元素与行内元素 38
3.2 页面定位技术 39
3.2.1 CSS定位机制 39
3.2.2 浮动定位问题 39
3.2.3 清除浮动 42
3.3 CSS定位属性 45
3.3.1 相对定位 45
3.3.2 绝对定位 47
3.3.3 固定定位 47
3.4 CSS布局技术 48
3.4.1 CSS布局理念 48
3.4.2 一列固定宽度居中 49
3.4.3 一列自适应宽度居中 50
3.4.4 二列固定宽度居中 50
3.4.5 二列自适应宽度居中 51
3.4.6 CSS高度自适应 52
3.4.7 溢出内容overflow属性 54
3.5 三列布局实例——唐诗《黄鹤楼》画卷 54
拓展实践 56
习题 57
模块4 文字段落与列表的应用 60
4.1 CSS文字样式 60
4.1.1 字体 60
4.1.2 文字大小 62
4.1.3 颜色 63
4.1.4 样式 64
4.2 文本对齐 64
4.2.1 CSS的文本属性 64
4.2.2 文本添加修饰实例 64
4.2.3 文本居中排列实例 65
4.2.4 制作Google公司Logo实例 66
4.2.5 首字下沉图文混排实例 66
4.3 CSS列表样式 68
4.3.1 列表的类型 68
4.3.2 CSS的列表属性 69
4.3.3 List图文混排 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.1 CSS图片边框 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.4 CSS样式圆角布局研究 86
5.4.1 以四角小图实现圆角效果实例 87
5.4.2 以画线方式实现圆角效果实例 88
5.4.3 多图片组合布局圆角效果实例 90
5.5 背景图片的CSS Sprite技术 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.1 CSS样式实现垂直导航栏 121
7.2.2 利用背景图片制作立体导航菜单 122
7.2.3 制作带下拉子菜单的导航菜单 124
拓展实践 127
习题 127
模块8 CSS控制其他元素的显示 130
8.1 CSS静态滤镜 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.11 X射线滤镜 141
8.1.12 波浪滤镜 141
8.1.13 一个使用颜色渐变滤镜的实例 142
8.2 控制滚动条的显示 143
8.2.1 滚动条样式的属性 144
8.2.2 控制滚动条样式的实例 144
8.3 CSS布局中的兼容问题 145
8.3.1 兼容问题的由来 145
8.3.2 兼容问题的解决 146
8.3.3 一个关于浏览器显示差异的实例 147
拓展实践 149
习题 150
模块9 CSS 3.0的新技术与应用 152
9.1 CSS 3.0简介 152
9.1.1 CSS 3.0技术的发展 152
9.1.2 CSS 3.0中的新特性 152
9.2 进入CSS 3.0样式新世界 153
9.2.1 用CSS 3.0实现圆角效果实例 153
9.2.2 CSS 3.0边框、阴影实例 154
9.2.3 CSS 3.0文本描边及阴影效果实例 155
9.2.4 CSS 3.0表格美化效果实例 156
9.2.5 CSS 3.0按钮动画过渡效果实例 157
9.2.6 CSS 3.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