豆瓣评分
目前无人评价
内容简介 · · · · · ·
CSS布局是目前最流行的网页制作技术。本书通过实例讲解了CSS各个属性的使用方法和怎样使用CSS进行页面的制作。全书内容包括Web标准布局的本质、XHTML书写规范、CSS基础与书写规范、网页头部元素的详细定义、CSS基本布局属性、CSS容器属性、CSS定义文本属性、元素的修饰和CSS常见应用、DIV+CSS布局基础、关于整站样式表的分析、关于标准的校验以及各种制作实例等内容。
本书适合广大Web网站设计人员、网站设计的初学者、网站管理维护人员、大专院校学生和社会培训学生阅读。
目录 · · · · · ·
第1篇 CSS布局基础知识
第1章 Web标准布局的本质 2
1.1 为什么要建立Web标准 2
1.1.1 建立Web标准的目的 2
1.1.2 使用Web标准的好处 2
1.2 什么是Web标准 3
· · · · · · (更多)
第1章 Web标准布局的本质 2
1.1 为什么要建立Web标准 2
1.1.1 建立Web标准的目的 2
1.1.2 使用Web标准的好处 2
1.2 什么是Web标准 3
· · · · · · (更多)
第1篇 CSS布局基础知识
第1章 Web标准布局的本质 2
1.1 为什么要建立Web标准 2
1.1.1 建立Web标准的目的 2
1.1.2 使用Web标准的好处 2
1.2 什么是Web标准 3
1.3 结构和表现 3
1.4 两种思考方式 5
1.5 Web标准的前景 7
1.6 Web标准网站欣赏 7
第2章 XHTML书写规范 10
2.1 为什么要使用XHTML 10
2.2 什么是XHTML 10
2.3 XHTML语法基础 12
2.3.1 XHTML页面结构 12
2.3.2 元素的书写格式和属性 13
2.3.3 各种元素的属性 14
2.4 XHTML代码规范 18
第3章 CSS基础与书写规范 20
3.1 CSS的基础知识 20
3.1.1 什么是CSS 20
3.1.2 CSS的语法 21
3.1.3 选择符 22
3.1.4 属性 23
3.1.5 伪类和伪元素 23
3.1.6 颜色单位 24
3.1.7 长度单位 24
3.1.8 百分比值 25
3.1.9 URL 26
3.1.10 默认值 26
3.1.11 继承性 26
3.2 CSS编码规范 27
3.2.1 CSS基本书写规范 27
3.2.2 CSS命名参考 28
3.2.3 CSS样式表书写顺序 29
3.3 怎样更好地应用CSS 29
3.3.1 块元素和内联元素 29
3.3.2 CSS的一些实用技巧 30
3.3.3 怎样调试CSS 30
3.4 关于CSS的学习 33
第2篇 CSS页面布局技巧
第4章 网页头部元素的详细定义 36
4.1 DOCTYPE的选择 36
4.1.1 什么是DOCTYPE 36
4.1.2 选择什么样的DOCTYPE 36
4.2 名字空间 37
4.3 编码问题 37
4.4 meta标签 38
4.5 CSS的调用 39
4.5.1 调用样式表的几种方法 39
4.5.2 应用样式的优先级 41
4.6 网页头部实例 45
第5章 CSS基本布局属性 47
5.1 页面的制作流程和整体分析 47
5.2 元素定位基础知识 48
5.2.1 块元素的默认排列 48
5.2.2 内联元素的默认排列 49
5.2.3 块元素和内联元素的混合默认排列 49
5.2.4 使用浮动属性进行定位 50
5.3 定位属性详解 51
5.3.1 定位模式 51
5.3.2 边偏移 51
5.3.3 层叠定位属性 51
5.4 定位属性的应用 52
5.4.1 绝对定位 52
5.4.2 相对定位 54
5.4.3 固定定位 55
5.4.4 层叠定位属性的使用 55
5.5 页面背景的设定 57
5.5.1 使用背景色定义背景 57
5.5.2 背景图片的默认使用 57
5.5.3 背景图片的重复 58
5.5.4 背景图片的位置 59
5.5.5 背景图片的附件 61
5.6 背景的综合应用 62
5.6.1 背景颜色和背景图片的层叠 62
5.6.2 背景图片的重复和位置的关系 63
5.6.3 背景属性在内联元素中的使用 64
5.6.4 背景属性的缩写 64
5.6.5 页面文本的样式 65
5.6.6 链接的样式 66
5.7 布局的基础知识 67
5.7.1 页面布局的步骤 67
5.7.2 使用id还是class 67
5.7.3 控制内容显示的display属性 68
5.7.4 控制内容显示的visibility属性 69
5.7.5 使用text-align属性的水平居中 70
5.7.6 使用margin属性的水平居中 71
5.8 浮动属性 72
5.8.1 浮动属性详解 72
5.8.2 相邻的浮动元素和固定元素 72
5.8.3 相邻的两个浮动元素 74
5.8.4 相邻的多个浮动元素 75
5.9 关于ul和li的样式详解 75
5.9.1 使用list-style-type属性 76
5.9.2 使用list-style-position属性 76
5.9.3 使用list-style-image属性 77
5.9.4 使用list-style属性 78
5.10 一个纵向导航菜单的制作 78
5.10.1 菜单原理 78
5.10.2 制作菜单内容和结构部分 79
5.10.3 CSS代码编写 79
5.11 一个横向导航菜单的制作 83
5.11.1 菜单原理 83
5.11.2 制作菜单内容和结构部分 83
5.11.3 CSS代码编写 84
5.12 清除浮动 87
5.12.1 清除浮动属性详解 87
5.12.2 清除浮动属性的使用 88
5.13 页面header部分的制作 90
5.13.1 效果图分析（1） 90
5.13.2 第一次切图 90
5.13.3 第二次切图 91
5.13.4 制作前的准备工作 92
5.13.5 效果图分析（2） 93
5.13.6 页面结构的制作 93
5.13.7 基础样式的定义 94
5.13.8 banner部分样式的定义 95
5.13.9 menu部分样式的定义 96
5.13.10 页面全部的CSS代码 97
第6章 CSS容器属性 99
6.1 什么是盒模型 99
6.1.1 内容与盒模型 99
6.1.2 背景与盒模型 100
6.2 补白属性 100
6.2.1 补白属性详解 101
6.2.2 百分比值的使用 102
6.2.3 单侧的补白属性 103
6.2.4 补白属性的简写 104
6.3 边框属性 106
6.3.1 边框样式 106
6.3.2 边框宽度 107
6.3.3 边框颜色 108
6.3.4 边框的综合定义 110
6.3.5 单侧边框的综合定义 111
6.3.6 一个有用的表格边框属性 112
6.3.7 应用边框属性的实例 112
6.4 边界属性 113
6.4.1 整体边界属性 114
6.4.2 单侧的边界和简写 115
6.4.3 垂直方向的边界重叠 116
6.4.4 水平方向的边界 116
6.4.5 负的边界值 117
6.4.6 在内联元素中使用边界属性 118
6.5 父元素与子元素之间的距离 119
6.5.1 子元素边界属性值为0 119
6.5.2 父元素的补白属性为0 120
6.5.3 父元素含有padding属性同时子元素
含有margin属性 121
6.6 嵌套的元素中使用负边界 122
6.7 固定大小的问题 123
6.7.1 盒模型大小的计算 123
6.7.2 使用overflow属性固定长度和宽度 124
6.8 自适应问题 125
6.8.1 什么叫自适应 125
6.8.2 独立元素的高度自适应 125
6.8.3 利用背景色的两列自适应 127
6.8.4 左右均能自适应的两列布局 129
6.8.5 三列布局中有两列内容固定 131
6.8.6 三列布局中有一列内容固定 133
6.8.7 三列布局中高度都不确定的情况 136
6.8.8 水平自适应的原理 138
6.9 制作一个简单的页面框架 140
6.9.1 框架结构分析 140
6.9.2 页面结构的制作 141
6.9.3 定义CSS代码 141
6.9.4 页面最终效果及注意的问题 145
6.10 header部分的进一步完善 146
6.10.1 标题及签名部分的完善 146
6.10.2 导航部分的完善 147
6.10.3 调整后的页面效果 149
6.11 页面主体结构的制作 149
6.11.1 效果图分析 149
6.11.2 主体大表格和内容部分 150
6.11.3 右侧分类导航部分 152
6.12 页面主体部分CSS的编写 154
6.12.1 3个主要结构的样式 154
6.12.2 内容部分的样式 155
6.12.3 导航列表部分的CSS编写 157
6.12.4 主体部分最后的显示效果和CSS代码 160
第7章 CSS定义文本属性 163
7.1 文本的缩进和对齐 163
7.1.1 段首缩进 163
7.1.2 段首字符的下沉与大写 164
7.1.3 文本的对齐 165
7.1.4 图文混排 166
7.2 行高与间隔 167
7.2.1 行高属性详解 167
7.2.2 利用行高属性使文本垂直居中 170
7.2.3 间隔与空白 171
7.2.4 文本的转换 173
7.3 水平和垂直居中问题 174
7.3.1 已知容器大小和内容大小时的水平和
垂直居中问题 174
7.3.2 未知容器大小、已知内容大小时的水平和
垂直居中问题 175
7.3.3 已知容器大小、未知内容大小时的水平和
垂直居中问题 176
7.3.4 容器大小及内容大小均未知时的水平和
垂直居中问题 178
7.3.5 修饰图片的水平和垂直居中问题 180
7.4 字体的综合属性 180
7.4.1 字体的选择 180
7.4.2 字体的大小 181
7.4.3 字体的加粗 183
7.4.4 字体的样式 184
7.4.5 字体的变形 185
7.4.6 字体属性的简写 185
7.5 文本的修饰和链接 186
7.5.1 文本的修饰 187
7.5.2 链接属性详解 188
7.5.3 使用链接的顺序 190
7.5.4 链接的继承性 191
7.5.5 cursor属性 192
7.6 完成页面header部分的制作 193
7.6.1 标题和签名部分 193
7.6.2 menu导航部分 194
7.7 main部分的完善 197
7.7.1 内容部分的完善 197
7.7.2 分类导航部分的完善 198
7.8 footer部分的制作 202
7.8.1 效果图分析 202
7.8.2 结构部分的制作 202
7.8.3 页面样式的添加 202
7.9 页面在IE浏览器中的显示效果 205
第8章 元素的修饰和CSS常见应用 206
8.1 图片的修饰 206
8.1.1 网页中常用的图片格式 206
8.1.2 需要使用图片的情况 207
8.1.3 作为背景的图片修饰 207
8.1.4 修饰内容图片 207
8.2 使用图片制作简单圆角框 209
8.2.1 单色或者单线圆角框自适应高度 209
8.2.2 单色或者单线圆角框自适应宽度 211
8.2.3 单色或者单线圆角框完全自适应 212
8.3 复杂圆角框的制作 214
8.3.1 自适应高度 215
8.3.2 自适应宽度 216
8.3.3 完全自适应 216
8.4 用CSS制作代替图片的圆角 219
8.4.1 CSS圆角实现原理 219
8.4.2 CSS圆角的制作 220
8.5 表单的修饰 223
8.5.1 表单的分类 223
8.5.2 文本域的修饰 224
8.5.3 文本区域的修饰 225
8.5.4 按钮的修饰 226
8.5.5 复选框的修饰 226
8.5.6 单选按钮的修饰 226
8.5.7 列表的修饰 227
8.5.8 文件域的修饰 227
8.5.9 图像域的修饰 228
8.6 登录框的制作 228
8.6.1 效果图分析 228
8.6.2 页面结构部分制作 229
8.6.3 CSS部分的编写 229
8.7 滚动条的修饰 232
8.7.1 滚动条的显示 232
8.7.2 滚动条的修饰 234
8.8 表格的修饰 235
8.8.1 控制表格的边线和背景 235
8.8.2 表格的高度和宽度 236
8.8.3 表格的居中问题 236
8.8.4 表格的内容与高度 237
8.9 分隔线的修饰 238
8.10 关于导航栏的制作和修饰 239
8.10.1 纵向导航栏的修饰 240
8.10.2 制作链接样式 241
8.10.3 制作鼠标悬停效果 241
8.10.4 横向导航栏 244
8.11 下拉菜单的制作 244
8.11.1 下拉菜单的显示效果 244
8.11.2 菜单的原理 245
8.11.3 制作菜单结构部分 245
8.11.4 编写主导航部分的样式 246
8.11.5 编写子栏目的样式 247
8.11.6 隐藏子栏目 247
8.11.7 制作显示效果的样式 248
8.11.8 使用的脚本代码 248
8.12 遮盖的问题 249
第3篇 整站的CSS定义技巧
第9章 DIV+CSS布局基础 252
9.1 初识DIV+CSS布局的流程 252
9.2 了解盒模型 254
9.2.1 div标签的盒模型示例 254
9.2.2 基本盒模型 258
9.2.3 边距 258
9.2.4 补白 262
9.2.5 边框 264
9.3 页面元素的布局 268
9.3.1 块级元素与行内元素 268
9.3.2 CSS布局方式：常规流 270
第10章 关于整站样式表的分析 272
10.1 站点页面的分析 272
10.1.1 规划样式表的原则 272
10.1.2 规划样式表的方法 272
10.1.3 实例的分析 273
10.2 站点二级页面的制作 274
10.2.1 日志内容页面结构的规划 274
10.2.2 日志内容页面CSS部分的制作 275
10.2.3 日志列表页的制作 278
第11章 关于标准的校验 281
11.1 为什么要进行标准的校验 281
11.2 怎样进行标准的校验 281
11.2.1 XHTML校验的方法 281
11.2.2 CSS校验的方法 284
11.2.3 XHTML校验常见错误 285
11.2.4 CSS校验常见错误 285
11.3 实例页面的校验 285
11.3.1 实例首页的校验 286
11.3.2 一个二级页面的校验 287
第4篇 DIV+CSS布局实例
第12章 DIV+CSS页面布局设计 290
12.1 页面布局的准备 290
12.1.1 效果图的制作 290
12.1.2 框架的规划 291
12.1.3 布局图片的分离与制作 295
12.2 页面的制作 296
12.2.1 框架代码的编写 296
12.2.2 内容代码的编写 298
12.2.3 CSS代码的编写 299
第13章 新闻系统的页面布局 304
13.1 新闻系统的页面分析 304
13.2 新闻系统首页的设计 304
13.2.1 效果图的设计 304
13.2.2 框架的规划 305
13.2.3 布局图片的分离与制作 308
13.2.4 框架代码的编写 309
13.2.5 内容代码的编写 310
13.2.6 CSS代码的编写 311
13.2.7 预览效果及微调 315
13.3 新闻系统栏目页面的设计 315
13.3.1 效果图的设计 315
13.3.2 框架的规划 315
13.3.3 布局图片的分离与制作 320
13.3.4 框架代码的编写 320
13.3.5 内容代码的编写 322
13.3.6 CSS代码的编写 323
13.3.7 预览效果及微调 323
13.4 新闻系统列表页的设计 324
13.4.1 效果图的设计 324
13.4.2 框架的规划 325
13.4.3 布局图片的分离与制作 325
13.4.4 框架代码的编写 326
13.4.5 内容代码的编写 326
13.4.6 CSS代码的编写 327
13.4.7 预览效果及微调 327
13.5 新闻系统内容页的设计 327
13.5.1 效果图的设计 327
13.5.2 框架的规划 327
13.5.3 布局图片的分离与制作 329
13.5.4 框架代码的编写 329
13.5.5 内容代码的编写 330
13.5.6 CSS代码的编写 330
13.5.7 预览效果及微调 330
第14章 微博系统的页面布局 331
14.1 微博系统的页面分析 331
14.2 微博系统个人首页的设计 331
14.2.1 效果图的设计 331
14.2.2 框架的规划 332
14.2.3 布局图片的分离与制作 335
14.2.4 框架代码的编写 336
14.2.5 内容代码的编写 339
14.2.6 CSS代码的编写 340
14.2.7 预览效果及微调 342
14.3 微博系统相册列表页的设计 343
14.3.1 效果图的设计 343
14.3.2 框架的规划 344
14.3.3 布局图片的分离与制作 344
14.3.4 框架代码的编写 344
14.3.5 CSS代码的编写 345
14.3.6 预览效果及微调 346
14.4 微博系统相册幻灯页的设计 346
14.4.1 效果图的设计 346
14.4.2 源代码分析 346
14.4.3 布局图片的分离与制作 348
14.5 微博系统日志详情页的设计 349
14.5.1 效果图的设计 349
14.5.2 框架的规划 349
14.5.3 框架代码的编写 351
14.5.4 CSS代码的编写 352
14.5.5 预览效果及微调 353
14.6 微博系统微频道（广场）的设计 353
14.6.1 效果图的设计 353
14.6.2 框架的规划 353
14.6.3 框架代码的编写 354
14.6.4 内容代码的编写 356
14.6.5 CSS代码的编写 356
14.6.6 预览效果及微调 358
第15章 论坛系统的页面布局 359
15.1 论坛系统的页面分析 359
15.2 论坛系统首页的设计 359
15.2.1 效果图的设计 359
15.2.2 框架的规划 359
15.2.3 布局图片的分离与制作 363
15.2.4 框架代码的编写 363
15.2.5 内容代码的编写 365
15.2.6 CSS代码的编写 366
15.2.7 预览效果及微调 369
15.3 论坛系统栏目页的设计 369
15.3.1 效果图的设计 369
15.3.2 框架的规划 369
15.3.3 布局图片的分离与制作 371
15.3.4 框架代码的编写 371
15.3.5 内容代码的编写 372
15.3.6 CSS代码的编写 373
15.3.7 预览效果及微调 374
15.4 论坛系统版块页的设计 374
15.4.1 效果图的设计 374
15.4.2 框架的规划 375
15.4.3 布局图片的分离与制作 377
15.4.4 框架代码的编写 377
15.4.5 内容代码的编写 379
15.4.6 CSS代码的编写 380
15.4.7 预览效果及微调 381
15.5 论坛系统内容页的设计 381
15.5.1 效果图的设计 381
15.5.2 框架的规划 383
15.5.3 布局图片的分离与制作 384
15.5.4 框架代码的编写 384
15.5.5 内容代码的编写 386
15.5.6 CSS代码的编写 387
15.5.7 预览效果及微调 388
第16章 商城系统的页面布局 389
16.1 商城系统的页面分析 389
16.2 商城系统首页的设计 389
16.2.1 效果图的设计 389
16.2.2 框架的规划 389
16.2.3 布局图片的分离与制作 398
16.2.4 框架代码的编写 399
16.2.5 内容代码的编写 405
16.2.6 CSS代码的编写 408
16.2.7 预览效果及微调 411
附录A CSS标记速查 412
A.1 字体属性 412
A.1.1 设置字体--font-family 412
A.1.2 设置字号--font-size 412
A.1.3 字体风格--font-style 412
A.1.4 设置加粗字体--font-weight 413
A.1.5 小型的大写字母--font-variant 413
A.1.6 复合属性：字体--font 413
A.2 颜色及背景属性 413
A.2.1 颜色属性设置--color 413
A.2.2 背景颜色--background-color 414
A.2.3 背景图像--background-image 414
A.2.4 背景重复--background-repeat 415
A.2.5 背景附件--background-attachment 415
A.2.6 背景位置--background-position 415
A.2.7 复合属性：背景--background 415
A.3 文本属性 416
A.3.1 单词间隔--word-spacing 416
A.3.2 字符间隔--letter-spacing 416
A.3.3 文字修饰--text-decoration 416
A.3.4 纵向排列--vertical-align 416
A.3.5 文本转换--text-transform 417
A.3.6 文本排列--text-align 417
A.3.7 文本缩进--text-indent 417
A.3.8 文本行高--line-height 417
A.3.9 处理空白--white-space 417
A.3.10 文本反排--unicode-bidi与
direction 418
A.4 边距与填充属性 418
A.4.1 顶端边距--margin-top 418
A.4.2 其他边距--margin-bottom、margin-left、
margin-right 419
A.4.3 复合属性：边距--margin 419
A.4.4 顶端填充--padding-top 419
A.4.5 其他填充--padding-bottom、padding-left、
padding-right 419
A.4.6 复合属性：填充--padding 419
A.5 边框属性 419
A.5.1 边框样式--border-style 420
A.5.2 边框宽度--border-width 421
A.5.3 边框颜色--border-color 421
A.5.4 边框属性--border 421
A.6 定位及尺寸属性 422
A.6.1 定位方式--position 422
A.6.2 元素位置--top、right、bottom、left 422
A.6.3 层叠顺序--z-index 423
A.6.4 浮动属性--float 423
A.6.5 清除属性--clear 423
A.6.6 可视区域--clip 423
A.6.7 设定大小--width、height 423
A.6.8 超出范围--overflow 424
A.6.9 可见属性--visibility 424
A.7 列表属性 424
A.7.1 列表符号--list-style-type 424
A.7.2 图像符号--list-style-image 425
A.7.3 列表缩进--list-style-position 425
A.7.4 复合属性：列表--list-style 425
A.8 光标属性--cursor 425
A.9 滤镜属性 426
A.9.1 不透明度--alpha 426
A.9.2 动感模糊--blur 426
A.9.3 对颜色进行透明处理--chroma 427
A.9.4 设置阴影--dropShadow 427
A.9.5 对象的翻转--flipH、flipV 427
A.9.6 发光效果--glow 427
A.9.7 灰度处理--gray 427
A.9.8 反相--invert 428
A.9.9 X光片效果--Xray 428
A.9.10 遮罩效果--mask 428
A.9.11 波形滤镜--wave 428
· · · · · · (收起)
第1章 Web标准布局的本质 2
1.1 为什么要建立Web标准 2
1.1.1 建立Web标准的目的 2
1.1.2 使用Web标准的好处 2
1.2 什么是Web标准 3
1.3 结构和表现 3
1.4 两种思考方式 5
1.5 Web标准的前景 7
1.6 Web标准网站欣赏 7
第2章 XHTML书写规范 10
2.1 为什么要使用XHTML 10
2.2 什么是XHTML 10
2.3 XHTML语法基础 12
2.3.1 XHTML页面结构 12
2.3.2 元素的书写格式和属性 13
2.3.3 各种元素的属性 14
2.4 XHTML代码规范 18
第3章 CSS基础与书写规范 20
3.1 CSS的基础知识 20
3.1.1 什么是CSS 20
3.1.2 CSS的语法 21
3.1.3 选择符 22
3.1.4 属性 23
3.1.5 伪类和伪元素 23
3.1.6 颜色单位 24
3.1.7 长度单位 24
3.1.8 百分比值 25
3.1.9 URL 26
3.1.10 默认值 26
3.1.11 继承性 26
3.2 CSS编码规范 27
3.2.1 CSS基本书写规范 27
3.2.2 CSS命名参考 28
3.2.3 CSS样式表书写顺序 29
3.3 怎样更好地应用CSS 29
3.3.1 块元素和内联元素 29
3.3.2 CSS的一些实用技巧 30
3.3.3 怎样调试CSS 30
3.4 关于CSS的学习 33
第2篇 CSS页面布局技巧
第4章 网页头部元素的详细定义 36
4.1 DOCTYPE的选择 36
4.1.1 什么是DOCTYPE 36
4.1.2 选择什么样的DOCTYPE 36
4.2 名字空间 37
4.3 编码问题 37
4.4 meta标签 38
4.5 CSS的调用 39
4.5.1 调用样式表的几种方法 39
4.5.2 应用样式的优先级 41
4.6 网页头部实例 45
第5章 CSS基本布局属性 47
5.1 页面的制作流程和整体分析 47
5.2 元素定位基础知识 48
5.2.1 块元素的默认排列 48
5.2.2 内联元素的默认排列 49
5.2.3 块元素和内联元素的混合默认排列 49
5.2.4 使用浮动属性进行定位 50
5.3 定位属性详解 51
5.3.1 定位模式 51
5.3.2 边偏移 51
5.3.3 层叠定位属性 51
5.4 定位属性的应用 52
5.4.1 绝对定位 52
5.4.2 相对定位 54
5.4.3 固定定位 55
5.4.4 层叠定位属性的使用 55
5.5 页面背景的设定 57
5.5.1 使用背景色定义背景 57
5.5.2 背景图片的默认使用 57
5.5.3 背景图片的重复 58
5.5.4 背景图片的位置 59
5.5.5 背景图片的附件 61
5.6 背景的综合应用 62
5.6.1 背景颜色和背景图片的层叠 62
5.6.2 背景图片的重复和位置的关系 63
5.6.3 背景属性在内联元素中的使用 64
5.6.4 背景属性的缩写 64
5.6.5 页面文本的样式 65
5.6.6 链接的样式 66
5.7 布局的基础知识 67
5.7.1 页面布局的步骤 67
5.7.2 使用id还是class 67
5.7.3 控制内容显示的display属性 68
5.7.4 控制内容显示的visibility属性 69
5.7.5 使用text-align属性的水平居中 70
5.7.6 使用margin属性的水平居中 71
5.8 浮动属性 72
5.8.1 浮动属性详解 72
5.8.2 相邻的浮动元素和固定元素 72
5.8.3 相邻的两个浮动元素 74
5.8.4 相邻的多个浮动元素 75
5.9 关于ul和li的样式详解 75
5.9.1 使用list-style-type属性 76
5.9.2 使用list-style-position属性 76
5.9.3 使用list-style-image属性 77
5.9.4 使用list-style属性 78
5.10 一个纵向导航菜单的制作 78
5.10.1 菜单原理 78
5.10.2 制作菜单内容和结构部分 79
5.10.3 CSS代码编写 79
5.11 一个横向导航菜单的制作 83
5.11.1 菜单原理 83
5.11.2 制作菜单内容和结构部分 83
5.11.3 CSS代码编写 84
5.12 清除浮动 87
5.12.1 清除浮动属性详解 87
5.12.2 清除浮动属性的使用 88
5.13 页面header部分的制作 90
5.13.1 效果图分析（1） 90
5.13.2 第一次切图 90
5.13.3 第二次切图 91
5.13.4 制作前的准备工作 92
5.13.5 效果图分析（2） 93
5.13.6 页面结构的制作 93
5.13.7 基础样式的定义 94
5.13.8 banner部分样式的定义 95
5.13.9 menu部分样式的定义 96
5.13.10 页面全部的CSS代码 97
第6章 CSS容器属性 99
6.1 什么是盒模型 99
6.1.1 内容与盒模型 99
6.1.2 背景与盒模型 100
6.2 补白属性 100
6.2.1 补白属性详解 101
6.2.2 百分比值的使用 102
6.2.3 单侧的补白属性 103
6.2.4 补白属性的简写 104
6.3 边框属性 106
6.3.1 边框样式 106
6.3.2 边框宽度 107
6.3.3 边框颜色 108
6.3.4 边框的综合定义 110
6.3.5 单侧边框的综合定义 111
6.3.6 一个有用的表格边框属性 112
6.3.7 应用边框属性的实例 112
6.4 边界属性 113
6.4.1 整体边界属性 114
6.4.2 单侧的边界和简写 115
6.4.3 垂直方向的边界重叠 116
6.4.4 水平方向的边界 116
6.4.5 负的边界值 117
6.4.6 在内联元素中使用边界属性 118
6.5 父元素与子元素之间的距离 119
6.5.1 子元素边界属性值为0 119
6.5.2 父元素的补白属性为0 120
6.5.3 父元素含有padding属性同时子元素
含有margin属性 121
6.6 嵌套的元素中使用负边界 122
6.7 固定大小的问题 123
6.7.1 盒模型大小的计算 123
6.7.2 使用overflow属性固定长度和宽度 124
6.8 自适应问题 125
6.8.1 什么叫自适应 125
6.8.2 独立元素的高度自适应 125
6.8.3 利用背景色的两列自适应 127
6.8.4 左右均能自适应的两列布局 129
6.8.5 三列布局中有两列内容固定 131
6.8.6 三列布局中有一列内容固定 133
6.8.7 三列布局中高度都不确定的情况 136
6.8.8 水平自适应的原理 138
6.9 制作一个简单的页面框架 140
6.9.1 框架结构分析 140
6.9.2 页面结构的制作 141
6.9.3 定义CSS代码 141
6.9.4 页面最终效果及注意的问题 145
6.10 header部分的进一步完善 146
6.10.1 标题及签名部分的完善 146
6.10.2 导航部分的完善 147
6.10.3 调整后的页面效果 149
6.11 页面主体结构的制作 149
6.11.1 效果图分析 149
6.11.2 主体大表格和内容部分 150
6.11.3 右侧分类导航部分 152
6.12 页面主体部分CSS的编写 154
6.12.1 3个主要结构的样式 154
6.12.2 内容部分的样式 155
6.12.3 导航列表部分的CSS编写 157
6.12.4 主体部分最后的显示效果和CSS代码 160
第7章 CSS定义文本属性 163
7.1 文本的缩进和对齐 163
7.1.1 段首缩进 163
7.1.2 段首字符的下沉与大写 164
7.1.3 文本的对齐 165
7.1.4 图文混排 166
7.2 行高与间隔 167
7.2.1 行高属性详解 167
7.2.2 利用行高属性使文本垂直居中 170
7.2.3 间隔与空白 171
7.2.4 文本的转换 173
7.3 水平和垂直居中问题 174
7.3.1 已知容器大小和内容大小时的水平和
垂直居中问题 174
7.3.2 未知容器大小、已知内容大小时的水平和
垂直居中问题 175
7.3.3 已知容器大小、未知内容大小时的水平和
垂直居中问题 176
7.3.4 容器大小及内容大小均未知时的水平和
垂直居中问题 178
7.3.5 修饰图片的水平和垂直居中问题 180
7.4 字体的综合属性 180
7.4.1 字体的选择 180
7.4.2 字体的大小 181
7.4.3 字体的加粗 183
7.4.4 字体的样式 184
7.4.5 字体的变形 185
7.4.6 字体属性的简写 185
7.5 文本的修饰和链接 186
7.5.1 文本的修饰 187
7.5.2 链接属性详解 188
7.5.3 使用链接的顺序 190
7.5.4 链接的继承性 191
7.5.5 cursor属性 192
7.6 完成页面header部分的制作 193
7.6.1 标题和签名部分 193
7.6.2 menu导航部分 194
7.7 main部分的完善 197
7.7.1 内容部分的完善 197
7.7.2 分类导航部分的完善 198
7.8 footer部分的制作 202
7.8.1 效果图分析 202
7.8.2 结构部分的制作 202
7.8.3 页面样式的添加 202
7.9 页面在IE浏览器中的显示效果 205
第8章 元素的修饰和CSS常见应用 206
8.1 图片的修饰 206
8.1.1 网页中常用的图片格式 206
8.1.2 需要使用图片的情况 207
8.1.3 作为背景的图片修饰 207
8.1.4 修饰内容图片 207
8.2 使用图片制作简单圆角框 209
8.2.1 单色或者单线圆角框自适应高度 209
8.2.2 单色或者单线圆角框自适应宽度 211
8.2.3 单色或者单线圆角框完全自适应 212
8.3 复杂圆角框的制作 214
8.3.1 自适应高度 215
8.3.2 自适应宽度 216
8.3.3 完全自适应 216
8.4 用CSS制作代替图片的圆角 219
8.4.1 CSS圆角实现原理 219
8.4.2 CSS圆角的制作 220
8.5 表单的修饰 223
8.5.1 表单的分类 223
8.5.2 文本域的修饰 224
8.5.3 文本区域的修饰 225
8.5.4 按钮的修饰 226
8.5.5 复选框的修饰 226
8.5.6 单选按钮的修饰 226
8.5.7 列表的修饰 227
8.5.8 文件域的修饰 227
8.5.9 图像域的修饰 228
8.6 登录框的制作 228
8.6.1 效果图分析 228
8.6.2 页面结构部分制作 229
8.6.3 CSS部分的编写 229
8.7 滚动条的修饰 232
8.7.1 滚动条的显示 232
8.7.2 滚动条的修饰 234
8.8 表格的修饰 235
8.8.1 控制表格的边线和背景 235
8.8.2 表格的高度和宽度 236
8.8.3 表格的居中问题 236
8.8.4 表格的内容与高度 237
8.9 分隔线的修饰 238
8.10 关于导航栏的制作和修饰 239
8.10.1 纵向导航栏的修饰 240
8.10.2 制作链接样式 241
8.10.3 制作鼠标悬停效果 241
8.10.4 横向导航栏 244
8.11 下拉菜单的制作 244
8.11.1 下拉菜单的显示效果 244
8.11.2 菜单的原理 245
8.11.3 制作菜单结构部分 245
8.11.4 编写主导航部分的样式 246
8.11.5 编写子栏目的样式 247
8.11.6 隐藏子栏目 247
8.11.7 制作显示效果的样式 248
8.11.8 使用的脚本代码 248
8.12 遮盖的问题 249
第3篇 整站的CSS定义技巧
第9章 DIV+CSS布局基础 252
9.1 初识DIV+CSS布局的流程 252
9.2 了解盒模型 254
9.2.1 div标签的盒模型示例 254
9.2.2 基本盒模型 258
9.2.3 边距 258
9.2.4 补白 262
9.2.5 边框 264
9.3 页面元素的布局 268
9.3.1 块级元素与行内元素 268
9.3.2 CSS布局方式：常规流 270
第10章 关于整站样式表的分析 272
10.1 站点页面的分析 272
10.1.1 规划样式表的原则 272
10.1.2 规划样式表的方法 272
10.1.3 实例的分析 273
10.2 站点二级页面的制作 274
10.2.1 日志内容页面结构的规划 274
10.2.2 日志内容页面CSS部分的制作 275
10.2.3 日志列表页的制作 278
第11章 关于标准的校验 281
11.1 为什么要进行标准的校验 281
11.2 怎样进行标准的校验 281
11.2.1 XHTML校验的方法 281
11.2.2 CSS校验的方法 284
11.2.3 XHTML校验常见错误 285
11.2.4 CSS校验常见错误 285
11.3 实例页面的校验 285
11.3.1 实例首页的校验 286
11.3.2 一个二级页面的校验 287
第4篇 DIV+CSS布局实例
第12章 DIV+CSS页面布局设计 290
12.1 页面布局的准备 290
12.1.1 效果图的制作 290
12.1.2 框架的规划 291
12.1.3 布局图片的分离与制作 295
12.2 页面的制作 296
12.2.1 框架代码的编写 296
12.2.2 内容代码的编写 298
12.2.3 CSS代码的编写 299
第13章 新闻系统的页面布局 304
13.1 新闻系统的页面分析 304
13.2 新闻系统首页的设计 304
13.2.1 效果图的设计 304
13.2.2 框架的规划 305
13.2.3 布局图片的分离与制作 308
13.2.4 框架代码的编写 309
13.2.5 内容代码的编写 310
13.2.6 CSS代码的编写 311
13.2.7 预览效果及微调 315
13.3 新闻系统栏目页面的设计 315
13.3.1 效果图的设计 315
13.3.2 框架的规划 315
13.3.3 布局图片的分离与制作 320
13.3.4 框架代码的编写 320
13.3.5 内容代码的编写 322
13.3.6 CSS代码的编写 323
13.3.7 预览效果及微调 323
13.4 新闻系统列表页的设计 324
13.4.1 效果图的设计 324
13.4.2 框架的规划 325
13.4.3 布局图片的分离与制作 325
13.4.4 框架代码的编写 326
13.4.5 内容代码的编写 326
13.4.6 CSS代码的编写 327
13.4.7 预览效果及微调 327
13.5 新闻系统内容页的设计 327
13.5.1 效果图的设计 327
13.5.2 框架的规划 327
13.5.3 布局图片的分离与制作 329
13.5.4 框架代码的编写 329
13.5.5 内容代码的编写 330
13.5.6 CSS代码的编写 330
13.5.7 预览效果及微调 330
第14章 微博系统的页面布局 331
14.1 微博系统的页面分析 331
14.2 微博系统个人首页的设计 331
14.2.1 效果图的设计 331
14.2.2 框架的规划 332
14.2.3 布局图片的分离与制作 335
14.2.4 框架代码的编写 336
14.2.5 内容代码的编写 339
14.2.6 CSS代码的编写 340
14.2.7 预览效果及微调 342
14.3 微博系统相册列表页的设计 343
14.3.1 效果图的设计 343
14.3.2 框架的规划 344
14.3.3 布局图片的分离与制作 344
14.3.4 框架代码的编写 344
14.3.5 CSS代码的编写 345
14.3.6 预览效果及微调 346
14.4 微博系统相册幻灯页的设计 346
14.4.1 效果图的设计 346
14.4.2 源代码分析 346
14.4.3 布局图片的分离与制作 348
14.5 微博系统日志详情页的设计 349
14.5.1 效果图的设计 349
14.5.2 框架的规划 349
14.5.3 框架代码的编写 351
14.5.4 CSS代码的编写 352
14.5.5 预览效果及微调 353
14.6 微博系统微频道（广场）的设计 353
14.6.1 效果图的设计 353
14.6.2 框架的规划 353
14.6.3 框架代码的编写 354
14.6.4 内容代码的编写 356
14.6.5 CSS代码的编写 356
14.6.6 预览效果及微调 358
第15章 论坛系统的页面布局 359
15.1 论坛系统的页面分析 359
15.2 论坛系统首页的设计 359
15.2.1 效果图的设计 359
15.2.2 框架的规划 359
15.2.3 布局图片的分离与制作 363
15.2.4 框架代码的编写 363
15.2.5 内容代码的编写 365
15.2.6 CSS代码的编写 366
15.2.7 预览效果及微调 369
15.3 论坛系统栏目页的设计 369
15.3.1 效果图的设计 369
15.3.2 框架的规划 369
15.3.3 布局图片的分离与制作 371
15.3.4 框架代码的编写 371
15.3.5 内容代码的编写 372
15.3.6 CSS代码的编写 373
15.3.7 预览效果及微调 374
15.4 论坛系统版块页的设计 374
15.4.1 效果图的设计 374
15.4.2 框架的规划 375
15.4.3 布局图片的分离与制作 377
15.4.4 框架代码的编写 377
15.4.5 内容代码的编写 379
15.4.6 CSS代码的编写 380
15.4.7 预览效果及微调 381
15.5 论坛系统内容页的设计 381
15.5.1 效果图的设计 381
15.5.2 框架的规划 383
15.5.3 布局图片的分离与制作 384
15.5.4 框架代码的编写 384
15.5.5 内容代码的编写 386
15.5.6 CSS代码的编写 387
15.5.7 预览效果及微调 388
第16章 商城系统的页面布局 389
16.1 商城系统的页面分析 389
16.2 商城系统首页的设计 389
16.2.1 效果图的设计 389
16.2.2 框架的规划 389
16.2.3 布局图片的分离与制作 398
16.2.4 框架代码的编写 399
16.2.5 内容代码的编写 405
16.2.6 CSS代码的编写 408
16.2.7 预览效果及微调 411
附录A CSS标记速查 412
A.1 字体属性 412
A.1.1 设置字体--font-family 412
A.1.2 设置字号--font-size 412
A.1.3 字体风格--font-style 412
A.1.4 设置加粗字体--font-weight 413
A.1.5 小型的大写字母--font-variant 413
A.1.6 复合属性：字体--font 413
A.2 颜色及背景属性 413
A.2.1 颜色属性设置--color 413
A.2.2 背景颜色--background-color 414
A.2.3 背景图像--background-image 414
A.2.4 背景重复--background-repeat 415
A.2.5 背景附件--background-attachment 415
A.2.6 背景位置--background-position 415
A.2.7 复合属性：背景--background 415
A.3 文本属性 416
A.3.1 单词间隔--word-spacing 416
A.3.2 字符间隔--letter-spacing 416
A.3.3 文字修饰--text-decoration 416
A.3.4 纵向排列--vertical-align 416
A.3.5 文本转换--text-transform 417
A.3.6 文本排列--text-align 417
A.3.7 文本缩进--text-indent 417
A.3.8 文本行高--line-height 417
A.3.9 处理空白--white-space 417
A.3.10 文本反排--unicode-bidi与
direction 418
A.4 边距与填充属性 418
A.4.1 顶端边距--margin-top 418
A.4.2 其他边距--margin-bottom、margin-left、
margin-right 419
A.4.3 复合属性：边距--margin 419
A.4.4 顶端填充--padding-top 419
A.4.5 其他填充--padding-bottom、padding-left、
padding-right 419
A.4.6 复合属性：填充--padding 419
A.5 边框属性 419
A.5.1 边框样式--border-style 420
A.5.2 边框宽度--border-width 421
A.5.3 边框颜色--border-color 421
A.5.4 边框属性--border 421
A.6 定位及尺寸属性 422
A.6.1 定位方式--position 422
A.6.2 元素位置--top、right、bottom、left 422
A.6.3 层叠顺序--z-index 423
A.6.4 浮动属性--float 423
A.6.5 清除属性--clear 423
A.6.6 可视区域--clip 423
A.6.7 设定大小--width、height 423
A.6.8 超出范围--overflow 424
A.6.9 可见属性--visibility 424
A.7 列表属性 424
A.7.1 列表符号--list-style-type 424
A.7.2 图像符号--list-style-image 425
A.7.3 列表缩进--list-style-position 425
A.7.4 复合属性：列表--list-style 425
A.8 光标属性--cursor 425
A.9 滤镜属性 426
A.9.1 不透明度--alpha 426
A.9.2 动感模糊--blur 426
A.9.3 对颜色进行透明处理--chroma 427
A.9.4 设置阴影--dropShadow 427
A.9.5 对象的翻转--flipH、flipV 427
A.9.6 发光效果--glow 427
A.9.7 灰度处理--gray 427
A.9.8 反相--invert 428
A.9.9 X光片效果--Xray 428
A.9.10 遮罩效果--mask 428
A.9.11 波形滤镜--wave 428
· · · · · · (收起)
丛书信息
· · · · · ·
网站开发非常之旅(共10册)，
这套丛书还有
《网站开发非常之旅 iOS移动网站开发详解》《网站开发非常之旅Linux服务器配置与管理》《PHP网络编程技术详解》《Android移动网站开发详解》《网站开发非常之旅Dreamweaver CS6网页设计与制作详解》
等
。
网站开发非常之旅CSS+DIV网页布局技术详解的书评 · · · · · · ( 全部 0 条 )
论坛 · · · · · ·
在这本书的论坛里发言以下书单推荐 · · · · · · ( 全部 )
- 2、计算机类图书豆列 (清华大学出版社第六事业部)
谁读这本书? · · · · · ·
二手市场
· · · · · ·
- 在豆瓣转让 有1人想读，手里有一本闲着?
订阅关于网站开发非常之旅CSS+DIV网页布局技术详解的评论:
feed: rss 2.0
还没人写过短评呢
还没人写过短评呢