第1篇 CSS布局的相关概念 3
第1章 CSS的概念 3
1.1什么是CSS 3
1.2什么是XHTML 4
1.3一个使用CSS的简单实例 4
1.3.1使用CSS的代码及其显示效果 4
制作一个简单的CSS使用实例 4
1.3.2哪里是CSS样式 5
1.4怎样将CSS应用到网页中 6
1.4.1行内添加CSS样式 6
一个使用行内添加CSS样式的实例 6
1.4.2内嵌式调用CSS样式 7
一个使用内嵌式调用CSS样式的实例 7
1.4.3链接外部CSS样式 8
一个链接外部CSS样式的实例 8
1.5关于Web标准 9
1.5.1 Web标准的概念 9
1.5.2内容——信息传递的根本 10
1.5.3结构——内容与表现的桥梁 10
1.5.4表现——页面吸引力的灵魂 11
1.6 CSS与网页布局 12
1.7 CSS与脚本 12
1.8 CSS与网站优化 13
1.9怎样编辑CSS 14
1.10 CSS网站欣赏 14
第2章 XHTML基础 17
2.1一个最简单的XHTML页面 17
2.1.1最简单的XHTML页面的构成 17
一个最简单的XHTML页面的实例 17
2.1.2不显示的页面内容 18
一个XHTML中不显示内容的实例 18
2.1.3显示的页面内容 19
一个XHTML中显示内容的实例 19
2.2页面元素 20
2.3元素的属性 20
一个在元素中使用属性的示例 20
2.4页面整体元素＜html＞与名字空间 21
2.5页面头部元素 22
2.5.1定义页面的标题 22
一个定义页面标题的实例 22
2.5.2定义页面的编码 23
一个定义页面文本编码的实例 23
2.5.3定义页面的样式 24
一个定义页面样式的实例 24
2.5.4定义页面使用的外部文件 25
一个使用外部文件的实例 25
2.6页面主体元素 26
2.6.1区域元素 26
一个使用＜div＞元素的实例 26
2.6.2内容元素 27
一个使用＜span＞元素的实例 27
2.6.3列表元素 28
一个使用列表元素的实例 28
2.6.4段落元素 29
一个使用段落元素的实例 29
2.6.5标题元素 30
一个使用标题元素的实例 30
2.6.6图像元素 31
一个使用图像元素的实例 31
2.6.7表单元素 32
一个使用表单元素的实例 32
2.7 XHTML的书写规范 33
第3章 CSS的语法 35
3.1 CSS的基本写法 35
一个使用CSS样式的实例 35
3.2选择符 36
3.2.1 id选择符 36
一个使用id选择符的实例 36
3.2.2类选择符 37
一个使用类选择符的实例 37
3.2.3类型选择符 38
一个使用类型选择符的实例 38
3.2.4伪类 39
一个使用伪类选择符的实例 39
3.2.5子选择符 40
一个使用子选择符的实例 41
3.2.6选择符分组 41
一个使用选择符分组的实例 42
3.2.7选择符的优先级 43
一个关于选择符优先级的实例 43
3.3属性 44
3.4属性值 44
3.4.1长度值 45
3.4.2百分比值 45
3.4.3颜色值 45
3.4.4 URL值 46
3.5默认值 47
一个使用默认值的实例 47
3.6继承值 48
一个使用继承性的实例 48
3.7应用样式的优先级 49
一个关于应用样式优先级的实例 49
第2篇 CSS盒模型和块元素的定位 53
第4章 CSS控制元素的大小 53
4.1盒模型的概念 53
4.1.1块元素和内联元素 53
4.1.2元素宽度的计算 55
4.2元素内容的大小 55
4.2.1宽度属性width 55
一个使用宽度属性的实例 55
4.2.2高度属性height 56
一个使用height（高度）属性的实例 56
4.2.3内容与宽度、高度属性的关系 57
一个元素内容超出元素定义大小的实例 57
4.2.4最大宽度属性max-width 58
一个使用最大宽度属性的实例 58
4.2.5最小宽度属性min-width 59
一个使用最小宽度属性的实例 59
4.2.6最大高度属性max-height 60
一个使用最大高度属性的实例 61
4.2.7最小高度属性min-height 62
一个使用最小高度属性的实例 62
4.3元素的背景 63
4.3.1背景颜色属性background-color 63
一个使用背景颜色属性的实例 63
4.3.2背景图片属性background-image 64
一个使用背景图片属性的实例 64
4.3.3背景图片的重复属性background-repeat 65
一个使用背景图片重复属性的实例 65
4.3.4背景图片位置属性background-position 66
一个使用背景图片位置属性的实例 67
4.3.5背景图片滚动属性background-attachment 67
一个使用背景图片滚动属性的实例 68
4.3.6同时使用背景颜色和背景图片属性 69
一个同时使用背景颜色和背景图片属性的实例 69
4.3.7背景的综合属性background 70
一个同时使用背景的综合属性的实例 70
4.4元素的补白 71
4.4.1顶部补白属性padding-top 71
一个使用顶部补白属性的实例 71
4.4.2右侧补白属性padding-right 72
一个使用右侧补白属性的实例 72
4.4.3底部补白属性padding-bottom 73
一个使用底部补白属性的实例 73
4.4.4左侧补白属性padding-left 74
一个使用左侧补白属性的实例 74
4.4.5综合补白属性padding 75
一个使用综合补白属性的实例 75
4.4.6补白与背景 76
一个关于补白与背景属性的实例 76
4.5元素的边框 77
4.5.1顶部边框样式属性border-top-style 77
一个使用顶部边框样式属性的实例 78
4.5.2右侧边框样式属性border-right-style 79
一个使用右侧边框样式属性的实例 79
4.5.3底部边框样式属性border-bottom-style 80
一个使用底部边框样式属性的实例 81
4.5.4左侧边框样式属性border-left-style 82
一个使用左侧边框样式属性的实例 82
4.5.5顶部边框颜色属性border-top-color 83
一个使用顶部边框颜色属性的实例 83
4.5.6右侧边框颜色属性border- right-color 84
一个使用右侧边框颜色属性的实例 84
4.5.7底部边框颜色属性border-bottom-color 85
一个使用底部边框颜色属性的实例 85
4.5.8左侧边框颜色属性border-left-color 86
一个使用左侧边框颜色属性的实例 86
4.5.9顶部边框宽度属性border-top-width 87
一个使用顶部边框宽度属性的实例 88
4.5.10右侧边框宽度属性border-right-width 89
一个使用右侧边框宽度属性的实例 89
4.5.11底部边框宽度属性border-bottom-width 90
一个使用底部边框宽度属性的实例 90
4.5.12左侧边框宽度属性border-left-width 91
一个使用左侧边框宽度属性的实例 91
4.5.13边框样式属性border-style 92
一个使用边框样式属性的实例 92
4.5.14边框颜色属性border-color 93
一个使用边框颜色属性的实例 93
4.5.15边框宽度属性border-width 94
一个使用边框宽度属性的实例 94
4.5.16边框顶部综合属性border-top 95
一个使用边框顶部综合属性的实例 95
4.5.17边框右侧综合属性border-right 96
一个使用边框右侧综合属性的实例 96
4.5.18边框底部综合属性border-bottom 97
一个使用边框底部综合属性的实例 97
4.5.19边框左侧综合属性border-left 98
一个使用边框左侧综合属性的实例 98
4.5.20边框综合属性border 99
一个使用边框综合属性的实例 99
4.6元素的边界 100
4.6.1顶部边界属性margin-top 100
一个使用顶部边界属性的实例 100
4.6.2右侧边界属性margin-right 101
一个使用右侧边界属性的实例 101
4.6.3底部边界属性margin-bottom 102
一个使用底部边界属性的实例 102
4.6.4左侧边界属性margin-left 103
一个使用左侧边界属性的实例 104
4.6.5边界综合属性margin 104
一个使用边界综合属性的实例 105
4.6.6边界与背景 106
一个关于边界与背景属性的实例 106
4.7 嵌套元素的大小和距离 107
4.7.1父元素和子元素 107
一个包含子元素和父元素的实例 107
4.7.2子元素中使用边界属性，父元素中未定义大小 108
子元素中使用边界属性，父元素未定义大小的实例 108
4.7.3子元素中使用边界属性，父元素中使用补白属性 109
子元素中使用边界属性，父元素中使用补白属性的实例 109
第5章 CSS控制元素的定位 111
5.1元素的定位 111
5.1.1元素的定位属性position 111
一个使用元素的定位属性的实例 111
5.1.2上边偏移属性top 112
一个使用上边偏移属性的实例 113
5.1.3右边偏移属性right 113
一个使用右边偏移属性的实例 114
5.1.4下边偏移属性bottom 114
一个使用下边偏移属性的实例 115
5.1.5左边偏移属性left 116
一个使用左边偏移属性的实例 116
5.2绝对定位 117
5.2.1绝对定位与父元素 117
一个使用嵌套绝对定位元素的实例 117
5.2.2绝对定位与相邻元素 118
一个使用绝对定位与相邻元素的实例 118
5.3相对定位 119
5.3.1相对定位元素位置的确定 119
一个在元素中使用相对定位属性的实例 120
5.3.2相对定位与相邻元素 121
一个使用相对定位与相邻元素的实例 121
5.4定位元素的重叠 122
5.4.1层叠定位属性z-index 122
一个使用层叠定位属性的实例 122
5.4.2简单嵌套元素中的层叠定位 124
一个嵌套元素中使用层叠定位的实例 124
5.4.3包含子元素的复杂层叠定位 125
一个包含子元素的复杂层叠定位的实例 125
5.5定位属性的优点和局限性 127
5.5.1定位属性的优越性 127
一个使用定位属性定位的实例 127
5.5.2绝对定位属性的局限性 128
一个使用绝对定位属性的实例 129
5.5.3相对定位属性的局限性 130
一个使用相对定位属性的实例 130
第6章 CSS控制元素的布局 133
6.1元素的浮动 133
6.1.1元素的浮动属性float 133
一个使用元素浮动属性的实例 133
6.1.2浮动元素和固定元素 134
一个使用浮动元素和固定元素的实例 134
6.1.3两个浮动元素的显示效果 135
一个使用两个浮动元素的实例 136
6.1.4多个浮动元素的显示顺序 137
一个使用多个浮动元素的实例 137
6.2浮动的清除 138
6.2.1清除浮动属性clear 138
一个使用清除浮动属性的实例 138
6.2.2清除浮动与固定元素 140
一个清除右侧浮动的实例 140
6.3内容的剪切 141
6.3.1内容的剪切属性clip 141
一个使用内容的剪切属性的实例 141
6.3.2剪切属性与内容 142
一个剪切元素中内容的实例 142
6.4溢出内容的控制 144
6.4.1溢出属性overflow 144
一个使用溢出属性的实例 144
6.4.2横向溢出属性overflow-x 145
一个使用横向溢出属性的实例 145
6.4.3纵向溢出属性overflow-y 146
一个使用纵向溢出属性的实例 146
6.4.4滚动条和边框 147
一个显示边框和滚动条关系的实例 147
6.5元素的显示方式 148
6.5.1显示方式属性display 148
一个显示方式属性的实例 149
6.5.2内联块属性值的异常显示 150
一个使用内联块属性值的实例 151
6.5.3隐藏属性值none 152
一个使用隐藏属性值的实例 152
6.6元素的可视性 153
6.6.1可视属性visibility 153
一个使用可视属性的实例 154
6.6.2可视属性与显示方式属性的关系 155
一个使用可视属性与显示 155
方式属性的实例 155
第3篇 CSS控制元素显示效果 159
第7章 CSS控制文本的显示 159
7.1控制字体的显示 159
7.1.1字体选择属性font-family 159
一个使用字体选择属性的实例 159
7.1.2字体颜色属性color 160
一个使用字体颜色属性的实例 161
7.1.3字体大小属性font-size 162
一个使用字体大小属性的实例 162
7.1.4字体样式属性font-style 164
一个使用字体样式属性的实例 164
7.1.5字体加粗属性font-weight 166
一个使用字体加粗属性的实例 166
7.1.6字体修饰属性text-decoration 168
一个使用字体修饰属性的实例 169
7.1.7字体下划线位置属性text-underline-position 170
一个使用字体下划线位置属性的实例 170
7.1.8小型大写字母属性font-variant 171
一个使用小型大写字母属性的实例 171
7.1.9转换大小写属性text-transform 172
一个使用转换大小写属性的实例 173
7.1.10字母间隔属性letter-spacing 174
一个使用字母间隔属性的实例 174
7.1.11单词间隔属性word-spacing 176
一个使用单词间隔属性的实例 176
7.1.12行高属性line-height 177
一个使用行高属性的实例 177
7.1.13字体综合属性font 178
一个使用字体综合属性的实例 179
7.2控制文本的显示 180
7.2.1文本缩进属性text-indent 180
一个使用文本缩进属性的实例 180
7.2.2文本空白属性white-space 181
一个使用文本空白属性的实例 181
7.2.3文本溢出属性text-overflow 183
一个使用文本溢出属性的实例 183
7.2.4水平对齐属性text-align 184
一个使用水平对齐属性的实例 184
7.2.5垂直对齐属性vertical-align 186
一个使用垂直对齐属性的实例 186
7.2.6文本流向属性layout-flow 188
一个使用文本流向属性的实例 188
7.2.7文本流向属性与滚动条 190
一个使用文本流向属性同时显示滚动条的实例 190
7.2.8文本方向属性direction 191
一个使用文本方向属性的实例 191
7.2.9文本方向属性与滚动条 192
一个使用文本方向属性同时显示滚动条的实例 192
7.2.10文本排序属性unicode-bidi 194
一个使用文本排序属性的实例 194
7.2.11词内换行属性word-break 195
一个使用词内换行属性的实例 195
7.2.12自动折行属性word-wrap 197
一个使用自动折行属性的实例 197
7.2.13自动折行属性与词内换行属性的关系 198
一个同时使用自动折行属性与词内换行属性的实例 198
第8章 CSS控制列表元素的显示 201
8.1控制列表元素的显示 201
8.1.1列表符号属性list-style-type 201
一个使用列表符号属性的实例 202
8.1.2列表符号的混用 204
一个混用列表符号的实例 204
8.1.3列表图像属性list-style-image 205
一个使用列表图像属性的实例 205
8.1.4列表图像的显示位置 206
一个显示列表图像位置的实例 206
8.1.5标记位置属性list-style-position 207
一个使用标记位置属性的实例 207
8.1.6标记位置属性与列表高度 209
一个关于标记位置属性与列表高度的实例 209
8.1.7列表综合属性list-style 210
一个使用列表综合属性的实例 210
8.2列表元素的使用和嵌套 211
8.2.1列表元素的默认属性值 211
一个关于列表元素默认显示效果的实例 211
8.2.2统一列表元素的边界和补白 213
一个统一列表元素显示效果的实例 213
8.2.3嵌套列表的默认效果 214
一个使用嵌套列表的实例 214
8.2.4更改默认的嵌套效果 215
一个更改默认的显示标记的实例 216
一个更改默认缩进格式的实例 217
第9章 CSS控制表格元素的显示 219
9.1控制表格元素的显示 219
9.1.1表格边框合并属性border-collapse 219
一个使用表格边框合并属性的实例 219
9.1.2表格边框间距属性border-spacing 221
一个使用表格边框间距属性的实例 221
9.1.3表格标题位置属性caption-side 223
一个使用表格标题位置属性的实例 223
9.1.4表格布局属性table-layout 225
一个使用表格布局属性的实例 225
9.2单元格的制约关系 228
9.2.1确定单行或列的宽度或高度 228
一个同行或同列中存在不同高度或宽度的实例 228
9.2.2确定多行或多列的宽度或高度 230
一个确定多行或多列高度、宽度最终效果的实例 230
9.2.3单元格与嵌套的＜div＞元素 232
一个使用表格单元格和嵌套＜div＞元素的实例 232
第10章 CSS控制其他元素的显示 235
10.1控制滚动条的显示 235
10.1.1滚动条3d亮边框颜色属性scrollbar-3dlight-color 235
一个使用滚动条3d亮边框颜色属性的实例 235
10.1.2滚动条亮边框颜色属性scrollbar-highlight-color 236
一个使用滚动条亮边框颜色属性的实例 237
10.1.3滚动条滑块颜色属性scrollbar-face-color 238
一个使用滚动条滑块颜色属性的实例 238
10.1.4滚动条箭头颜色属性scrollbar-arrow-color 239
一个使用滚动条箭头颜色属性的实例 239
10.1.5滚动条阴影颜色属性scrollbar-shadow-color 240
一个使用滚动条阴影颜色属性的实例 240
10.1.6滚动条暗部阴影颜色属性scrollbar-darkshadow-color 241
一个使用滚动条暗部阴影颜色属性的实例 241
10.1.7滚动条拖动区颜色属性scrollbar-track-color 242
一个使用滚动条拖动区颜色属性的实例 243
10.1.8滚动条基准色属性scrollbar-base-color 244
一个使用滚动条基准色属性的实例 244
10.1.9定义滚动条的颜色 245
一个定义滚动条颜色的实例 245
10.2控制光标的显示 246
一个使用光标控制属性的实例 247
10.3控制打印的显示 249
10.3.1对象后插入分页符号属性page-break-after 249
一个使用对象后插入分页符号属性的实例 250
10.3.2对象前插入分页符号属性page-break-before 250
一个使用对象前插入分页符号属性的实例 251
10.4控制元素的缩放 252
一个关于元素缩放属性的实例 252
10.5 控制链接的显示 254
10.5.1定义链接未访问的显示效果 254
一个使用：link伪类的实例 254
10.5.2定义链接鼠标悬停的显示效果 255
一个使用：hover伪类的实例 255
10.5.3定义链接激活的显示效果 256
一个使用：active伪类的实例 256
10.5.4定义链接访问后的显示效果 257
一个使用：visited伪类的实例 257
10.5.5定义链接效果的顺序 258
一个使用4个伪类同时定义链接效果的实例 258
10.6添加辅助内容 260
一个关于添加辅助内容属性的实例 261
第11章 CSS滤镜 263
11.1 CSS静态滤镜 263
11.1.1颜色渐变滤镜Gradient 263
一个使用颜色渐变滤镜的实例 264
11.1.2插入图片滤镜AlphaImageLoader 265
一个使用插入图片滤镜的实例 266
11.1.3透明度滤镜Alpha 267
一个使用不透明度滤镜的实例 268
11.1.4模糊滤镜Blur 270
一个使用模糊滤镜的实例 271
11.1.5色彩处理滤镜BasicImage 272
一个使用色彩处理滤镜的实例 272
11.1.6颜色滤镜Chroma 274
一个使用颜色滤镜的实例 275
11.1.7阴影滤镜Shadow 276
一个使用阴影滤镜的实例 276
11.1.8下拉阴影滤镜DropShadow 278
一个使用下拉阴影滤镜的实例 278
11.1.9浮雕滤镜Emboss 279
一个使用浮雕滤镜的实例 279
11.1.10浮雕纹理滤镜Engrave 280
一个使用浮雕纹理滤镜的实例 281
11.1.11发光滤镜Glow 282
一个使用发光滤镜的实例 282
11.1.12遮罩滤镜MaskFilter 283
一个使用遮罩滤镜的实例 284
11.1.13矩阵滤镜Matrix 285
一个使用矩阵滤镜的实例 286
11.1.14运动模糊滤镜MotionBlur 288
一个使用运动模糊滤镜的实例 288
11.1.15波浪滤镜Wave 289
一个使用波浪滤镜的实例 290
11.1.16灰度滤镜Gray 292
一个使用灰度滤镜的实例 292
11.2 CSS动态滤镜 293
11.2.1滑动门滤镜Barn 293
一个使用滑动门滤镜的实例 294
11.2.2渐隐滤镜Fade 295
一个使用渐隐滤镜的实例 296
11.2.3百叶窗滤镜Blinds 297
一个使用百叶窗滤镜的实例 298
11.2.4对角扩张滤镜Inset 299
一个使用对角扩张滤镜的实例 300
11.2.5放射状擦除滤镜（RadialWipe） 301
一个使用放射状擦除滤镜的实例 302
11.2.6抽离滤镜Slide 303
一个使用抽离滤镜的实例 304
11.2.7锯齿覆盖滤镜Strips 305
一个使用锯齿覆盖滤镜的实例 306
11.2.8擦地板滤镜Zigzag 307
一个使用擦地板滤镜的实例 308
11.2.9风车滤镜Wheel 309
一个使用风车滤镜的实例 310
11.2.10随机线条滤镜RandomBars 311
一个使用随机线条滤镜的实例 312
11.2.11国际象棋滤镜CheckerBoard 313
一个使用国际象棋滤镜的实例 314
11.2.12滚动渐隐滤镜GradientWipe 315
一个使用滚动渐隐滤镜的实例 316
11.2.13特殊形状滤镜Iris 317
一个使用特殊形状滤镜的实例 318
11.2.14随机溶解滤镜RandomDissolve 319
一个使用随机溶解滤镜的实例 320
11.2.15 矩形螺旋滤镜Spiral 321
一个使用矩形螺旋滤镜的实例 322
11.2.16伸缩变形滤镜Stretch 323
一个使用伸缩变形滤镜的实例 324
11.2.17彩色拼缀滤镜Pixelate 325
一个使用彩色拼缀滤镜的实例 326
11.2.18动态综合滤镜RevealTrans 327
一个使用动态综合滤镜的实例 328
第4篇 CSS页面布局的方法 333
第12章 居中问题 333
12.1水平居中 333
12.1.1使用水平居中属性定义水平居中 333
一个使用水平居中属性定义水平居中的实例 333
12.1.2使用边界属性定义水平居中 335
一个使用边界属性定义水平居中的实例 335
12.2垂直居中 337
12.2.1使用垂直居中属性存在的问题 337
一个使用垂直居中属性定义垂直居中的实例 337
12.2.2使用边界属性定义垂直居中存在的问题 338
一个使用边界属性定义垂直居中的实例 338
12.2.3容器和内容大小固定的垂直居中 340
一个使用父元素的补白属性定义垂直居中的实例 340
一个使用子元素的边界属性定义垂直居中的实例 341
一个使用子元素的定位属性定义垂直居中的实例 342
12.2.4内容大小固定的垂直居中 343
一个使用子元素的定位属性和边界属性定义垂直居中的实例 343
12.2.5容器大小固定的垂直居中 344
一个使用子元素的定位属性和边界属性定义垂直居中的实例 345
12.2.6容器和内容大小均不固定的垂直居中 346
一个使用子元素的定位属性和边界属性定义垂直居中的实例 347
第13章 CSS布局构架的建立 349
13.1页面构架的解析 349
13.1.1页面板块的划分 349
13.1.2页面板块位置的规划 351
13.2页面板块位置的确定 351
13.2.1制作页面XHTML部分 352
13.2.2定义＜body＞元素的CSS样式 352
13.2.3确定main部分的位置 353
13.2.4确定header部分的位置 353
13.2.5确定nav部分的位置 354
13.2.6确定content部分的位置 354
13.2.7确定sidebar部分的位置 355
13.2.8确定footer部分的位置 356
13.2.9关于确定板块位置属性的一点说明 357
13.3分栏布局的实现 357
13.3.1横向分栏的实现原理和方法 357
一个实现横向分栏的实例 357
13.3.2纵向分栏的原理 359
13.3.3绝对定位纵向分栏的实现方法 359
一个使用绝对定位实现纵向分栏的实例 360
13.3.4浮动属性纵向分栏的实现方法 362
一个使用浮动属性实现纵向分栏的实例 362
13.3.5分栏中的宽度问题 365
一个在分栏结构中，子元素的宽度之和大于父元素宽度的实例 365
13.3.6分栏中的高度问题 367
一个在分栏结构中定义元素高度的实例 367
13.3.7分栏中的浮动问题 370
一个在分栏结构中使用浮动元素的实例 370
13.3.8制作三分栏结构的页面 372
一个三分栏结构页面的实际制作实例 372
第14章 CSS布局中的自适应问题 375
14.1水平自适应 375
14.1.1使用百分比值的水平自适应 375
使用百分比值定义水平自适应的实例 375
14.1.2使用绝对定位的水平自适应 376
一个使用绝对定位定义水平自适应的实例 377
14.2垂直自适应 378
14.2.1独立元素的垂直自适应 378
一个独立元素垂直自适应的实例 378
14.2.2其中一列内容固定的两列垂直自适应 380
一个背景不能自适应的实例 380
14.2.3两列内容都不固定的垂直自适应 383
一个两列内容都不固定的自适应实例 383
14.2.4三列中两列固定的垂直自适应 385
一个实现三列中右两列固定的垂直自适应实例 385
14.2.5三列中一列固定的垂直自适应 386
一个三列中一列固定的垂直自适应实例 386
14.2.6三列内容均不固定的垂直自适应 388
一个实现三列内容均不固定的垂直自适应的实例 388
14.2.7利用背景图片的垂直自适应 389
一个利用背景图片实现垂直自适应的实例 389
第15章 CSS布局中的兼容问题 391
15.1兼容问题的由来 391
15.1.1常用的浏览器介绍 391
15.1.2浏览器显示的差异 392
一个关于浏览器显示差异的实例 392
15.2兼容问题的解决 393
15.2.1使用兼容的属性和结构 393
解决浏览器兼容问题的实例 393
15.2.2使用CSS hack 394
15.3元素嵌套的兼容问题 395
15.3.1嵌套兼容问题的显示效果 395
一个嵌套元素中子元素超出父元素的实例 395
15.3.2嵌套兼容问题的解决方法 396
15.4浮动元素的兼容问题 397
15.4.1浮动子元素兼容问题的显示效果 397
一个嵌套元素中子元素为浮动元素的实例 397
15.4.2浮动子元素兼容问题的解决方法 398
15.5子元素负边界的兼容问题 400
15.5.1子元素负边界兼容问题的显示效果 400
一个子元素中使用负边界的实例 400
15.5.2子元素负边界兼容问题的解决方法 401
15.6显示距离的兼容问题 402
15.6.1只定义子元素边界的显示效果 402
一个只定义子元素边界的实例 403
一个在父元素中定义了大小，同时在子元素中定义了边界的实例 404
15.6.2同时定义边界和补白的显不效果 405
一个同时定义边界和补白属性的实例 405
15.6.3显示距离兼容问题的解决方法 407
15.7兼容IE 7.0的问题 407
15.7.1使用CSS hack的问题 407
一个在IE6.0、 IE7.0中无法兼容的实例 407
15.7.2嵌套元素的差异 408
第5篇 CSS布局实战 411
第16章 在Dreamweaver中使用CSS 411
16.1 Dreamweaver简介 411
16.1.1 Dreamweaver的界面与菜单 411
16.1.2 CSS面板 412
16.2制作独立的CSS文件 413
16.2.1创建和保存CSS文件 413
16.2.2使用CSS面板添加样式 414
16.2.3使用CSS面板编辑样式 415
16.2.4使用CSS面板添加样式的问题 416
16.2.5在Dreamweaver中直接编写CSS 416
16.3将CSS文件应用到网页中 417
16.3.1建立和规划站点的文件 417
16.3.2新建站点 418
16.3.3新建XHTML文件并添加内容 420
16.3.4在XHTML中使用样式 421
第17章 个人博客页面的制作 423
17.1效果图的规划和切分 423
17.1.1页面结构的规划 423
17.1.2图片内容的制作 424
17.2规划并建立站点 425
17.3制作页面头部内容 426
17.3.1建立和关联CSS文件 426
17.3.2修改页面头部标签 426
17.3.3定义页面的综合属性 427
17.3.4定义常见元素的初始属性 429
17.3.5制作页面头部的结构 431
17.3.6定义页面头部两个父元素的样式 431
17.3.7定义页面头部内容的样式 433
17.4制作页面导航内容 436
17.4.1制作页面导航的结构 437
17.4.2定义页面导航的样式 437
17.5制作页面主体内容 442
17.5.1制作页面主体的结构 442
17.5.2定义页面主体内容的样式 443
17.6制作日志内容 446
17.6.1制作日志内容的结构 446
17.6.2定义日志内容的样式 446
17.7制作侧栏内容 449
17.7.1制作侧栏的结构 449
17.7.2定义侧栏的通用样式 451
17.7.3定义侧栏的独立样式 454
17.8制作页面底部内容 456
17.8.1制作页面底部内容的结构 456
17.8.2定义页面底部内容的样式 457