新书：《精通CSS网页布局》（2）

《精通CSS网页布局》样章试读
·第7章
·第11章

目录
前　言
第1章　CSS布局基础    1
（视频长度：87:35）
1.1　认识网页中的CSS    1
1.1.1　编写符合CSS布局的HTML结构    1
1.1.2　DOCTYPE（文档类型）与CSS的
关系    3
1.2　CSS基本语法和用法    4
1.2.1　CSS基本语法    4
1.2.2　应用CSS样式    5
1.2.3　建立外部样式表    6
1.2.4　在HTML中导入外部样式表    7
1.3　CSS的属性和属性值    8
1.3.1　如何记忆CSS的属性    8
1.3.2　CSS的取值单位    9
1.4　CSS常用选择符    10
1.4.1　标签选择符    10
1.4.2　类选择符    11
1.4.3　ID选择符    13
1.5　CSS高级选择符    15
1.5.1　认识HTML文档的树状结构    15
1.5.2　子选择符    17
1.5.3　相邻选择符    18
1.5.4　属性选择符    19
1.6　灵活使用CSS选择符    23
1.6.1　CSS选择符分组    23
1.6.2　通配选择符    24
1.6.3　包含选择符    24
1.6.4　伪类和伪元素选择符    26
1.6.5　CSS选择符的嵌套    27
1.7　CSS的继承性    28
1.7.1　认识CSS的继承性    28
1.7.2　CSS继承性的局限性    29
1.8　CSS样式层叠和选择符优先级    31
1.8.1　CSS样式表的优先级    31
1.8.2　CSS样式的优先级    31
1.8.3　CSS选择符的优先级    31
第2章　使用Dreamweaver实现CSS
（视频长度：62:04）
布局    33
2.1　认识Dreamweaver的CSS布局工作流    33
2.1.1　增强CSS功能的【属性】面板    33
2.1.2　【页面属性】对话框    35
2.1.3　【CSS样式】面板    36
2.1.4　属性表    37
2.2　操作【CSS样式】面板    38
2.2.1　新建样式    38
2.2.2　定义样式的属性    39
2.2.3　应用样式    43
2.3　以CSS技术为核心的设计视图    45
2.3.1　强大的CSS设备类型    45
2.3.2　可视化助理    47
2.4　使用DW实现CSS布局实战    49
2.4.1　使用Dreamweaver CS3构建页面
结构    49
2.4.2　使用【页面属性】统一基本样式    51
2.4.3　使用【CSS样式】面板定制页面
基本布局    54
第3章　听话的文字和版式    56
（视频长度：85:48）
3.1　看懂Dreamweaver CS3提供的模板    56
3.1.1　善于利用示例页    56
3.1.2　挖掘标准网页布局模板的价值    60
3.2　你的文字听话吗    62
3.2.1　国际雅虎和中国雅虎    62
3.2.2　选择好单位让你的文字更听话    64
3.2.3　设计网页字体大小配置方案    65
3.2.4　设计与字体大小相关联的网页布局    68
3.3　留心，不要让你的文字“露怯”    70
3.3.1　不要以为多此一举    71
3.3.2　让网页字体显示更灵活    71
3.3.3　别忘了通用字体    72
3.4　小家伙，你向哪儿看齐    73
3.4.1　文本对齐    74
3.4.2　布局居中    74
3.4.3　布局元素向左、右对齐    75
3.4.4　文本和元素垂直对齐    76
3.4.5　绝对定位元素居中显示    78
3.4.6　混合结构中对齐处理    80
3.5　咱们比比个吧    81
3.5.1　什么样的行高更合适阅读    82
3.5.2　行高、边距和伪行高    83
3.6　让网页看起来和颜悦色    85
3.6.1　在CSS中使用颜色    85
3.6.2　CSS布局与配色    86
第4章　扮靓网页的天使——图像    89
（视频长度：70:50）
4.1　选择：前景图像和背景图像    89
4.1.1　前景图像    89
4.1.2　背景图像    90
4.1.3　如何选用前景图像和背景图像    91
4.1.4　走出迷失的图像URL    91
4.2　图像边框和阴影    93
4.2.1　定义边距    93
4.2.2　巧设边距    94
4.2.3　为图像增加阴影    96
4.2.4　为img元素定义默认阴影样式    98
4.2.5　设计晶莹剔透的水印    99
4.3　图文混合排版    101
4.3.1　单行图文定位    101
4.3.2　单行图文对齐    103
4.3.3　图文环绕    106
4.3.4　调整图文环绕的间距    108
4.3.5　不规则图文环绕    108
4.4　隐形的翅膀——背景图像    111
4.4.1　控制背景图像的重复显示    111
4.4.2　背景图像水平平铺应用示例    112
4.4.3　背景图像垂直平铺应用示例    113
4.4.4　精确定位背景图像    114
4.4.5　固定背景图像在浏览器中的位置    117
4.4.6　如何增加多个背景图像    118
4.4.7　设计更酷的圆角    120
4.5　背景图像布局应用——伪列布局    124
第5章　活泼的超链接和导航菜单    132
（视频长度：84:28）
5.1　轻松掌握超链接样式    132
5.1.1　怪异的伪类    132
5.1.2　超链接的四种状态    133
5.1.3　为超链接绑定不同的样式    134
5.1.4　为页面定义不同的超链接样式    135
5.2　花枝招展的超链接样式    137
5.2.1　为超链接定义普通样式    137
5.2.2　避免影响版面晃动的超链接样式    138
5.2.3　模拟按钮样式    139
5.2.4　使用图像设计超链接样式    141
5.2.5　设计具有扩展性的超链接样式    143
5.3　构建导航条列表框架及其基本样式    144
5.3.1　为什么使用项目列表来构建导
航条    145
5.3.2　搭架结构合理的导航列表    145
5.3.3　使用定义列表搭架导航列表    147
5.3.4　控制项目列表的样式    147
5.3.5　有趣的项目符号    148
5.3.6　自定义图片项目符号    149
5.3.7　通过背景图像来定义项目符号    150
5.3.8　使用行内显示法设计项目列表水平
显示    151
5.3.9　使用浮动法设计项目列表水平显示    153
5.3.10　设计水平浮动列表的超链接样式    153
5.3.11　解决浮动溢出问题    154
5.3.12　使用定位法设计项目列表水平
显示    155
5.4　设计导航菜单    155
5.4.1　淡雅的垂直导航菜单    156
5.4.2　巧妙的水平导航菜单    158
5.4.3　背景图像在导航菜单中的应用    161
5.4.4　实用的多级菜单    164
5.4.5　时尚的滑动门菜单    167
第6章　更专业的表格和表单    170
（视频长度：57:00）
6.1　用好表格    170
6.1.1　正确使用表格    170
6.1.2　优化数据表格的结构    174
6.1.3　设计表格样式    176
6.2　表格样式设计实战    178
6.2.1　设计表格行样式    179
6.2.2　设计表格列样式    180
6.2.3　设计鼠标经过时表格行的样式    180
6.3　用好表单    182
6.3.1　认识表单    182
6.3.2　设计表单样式    184
6.4　表单样式设计实战    186
6.4.1　设计高亮显示当前表单样式    187
6.4.2　设计图标样式的表单效果    188
6.4.3　设计易用性表单效果    190
第7章　浮动的网页布局    194
（视频长度：103:44）
7.1　CSS的“水立方”模型    194
7.1.1　盒模型    194
7.1.2　盒模型解疑    195
7.1.3　盒模型的外边距    196
7.1.4　行内元素的外边距    197
7.1.5　块状元素的外边距    198
7.1.6　浮动元素的外边距    198
7.1.7　绝对定位元素的外边距    199
7.1.8　盒模型的内边距    200
7.1.9　盒模型的边框    202
7.1.10　盒模型的宽和高    203
7.2　构建符合标准的网页结构    205
7.2.1　是内容决定结构，还是表现决定
结构    205
7.2.2　选择好结构标签    207
7.2.3　研究禅意花园的网页结构    207
7.3　CSS浮动布局基础    211
7.3.1　认识网页布局类型    211
7.3.2　准备有趣的模块浮动游戏    211
7.3.3　①②③顺序的水平布局    212
7.3.4　③②①顺序的水平布局    212
7.3.5　②①③顺序的水平布局    213
7.3.6　③①②顺序的水平布局    214
7.3.7　①-②③结构布局    216
7.4　CSS浮动布局高级技术    217
7.4.1　探究浮动元素的空间大小    217
7.4.2　探究浮动元素的移动位置    218
7.4.3　探究浮动元素的环绕关系    220
7.4.4　浮动与清除    222
7.4.5　浮动元素包含其他对象的问题及其
解决方法    224
7.4.6　浮动元素被其他对象包含的问题及
其解决方法    225
7.4.7　浮动布局中元素垂直间距问题以及
解决方法    227
7.4.8　浮动布局中元素水平间距问题以及
解决方法    228
7.4.9　浮动布局中浮动元素并列错位问题
以及解决方法    230
7.5　CSS浮动布局实战    232
7.5.1　深红色咖啡馆    232
7.5.2　阳光灿烂喜洋洋    237
第8章　精确的网页布局    243
（视频长度：56:26）
8.1　CSS精确布局的定位原理    243
8.1.1　认识position    243
8.1.2　静态定位    244
8.1.3　绝对定位    245
8.1.4　相对定位    245
8.1.5　固定定位    248
8.2　定位布局中参照物和坐标系    250
8.2.1　绝对定位的参照物    250
8.2.2　绝对定位的坐标系    253
8.2.3　绝对定位的相对论    255
8.2.4　相对定位参照物和坐标系    256
8.3　定位布局中元素层叠处理    257
8.3.1　定位元素的层叠顺序    258
8.3.2　定位元素与文档流的层叠关系    259
8.3.3　定位元素的层叠包含关系    260
8.4　CSS定位布局实战    262
8.4.1　米老鼠卡通画册    262
8.4.2　禅意花园展室    267
8.4.3　蓝色的多瑙河    272
第9章　兼容性网页布局    278
（视频长度：81:52）
9.1　智能的IE条件语句    278
9.1.1　认识IE条件语句    278
9.1.2　IE条件语句基本用法    279
9.1.3　IE条件语句在实践中应用    282
9.2　探析IE浏览器渲染网页布局的特性    286
9.2.1　认识IE浏览器的渲染特性——
Layout    286
9.2.2　操控IE元素的Layout特性    287
9.2.3　网页元素的Layout特性    287
9.2.4　行内元素的Layout特性    290
9.2.5　与Layout特性相关的IE解析Bug
和解决方法    290
9.2.6　能够更好兼容不同浏览器    293
9.2.7　Layout元素与包含浮动元素的关系    293
9.2.8　Layout元素与相邻浮动元素的关系    295
9.2.9　Layout元素与列表元素的关系    296
9.2.10　Layout元素与定位元素的关系    299
9.3　浏览器兼容技术解析    300
9.3.1　你的浏览器符合标准吗    300
9.3.2　兼容IE 6版本浏览器    302
9.3.3　兼容IE 5系列版本浏览器    303
9.3.4　兼容IE 7版本浏览器    305
9.3.5　兼容FF等标准浏览器    305
9.4　深入剖析CSS层叠布局    306
9.4.1　认识CSS层叠包含框    306
9.4.2　CSS层叠包含框嵌套关系    308
9.4.3　IE在解析CSS层叠关系时的Bug    309
9.4.4　探析CSS层叠负值以及IE存在
Bug    310
9.5　IE浏览器常见Bug及其解决方法    312
9.5.1　超链接设计中存在的Bug    312
9.5.2　IE元素的内容与背景分离显示的
Bug    313
9.5.3　IE 6躲躲猫Bug    314
9.5.4　IE 6多余字符Bug    315
9.6　兼容性网页布局实战    316
9.6.1　三列等高布局新法及其非IE存在的
Bug和解决方法    316
9.6.2　三列浮动布局中IE的垂直空隙
Bug及其兼容方法    320
第10章　网页结构化布局与实施    323
（视频长度：83:28）
10.1　设计网页基本结构    323
10.1.1　网页基本结构的设计思路    323
10.1.2　设计符合SEO的网页结构    326
10.2　单列版式布局    327
10.2.1　单列版式的布局结构和设计方法    328
10.2.2　单列固定宽度版式设计    330
10.2.3　单列固定宽度版式实施    332
10.2.4　江南水乡意象画布局设计    334
10.2.5　江南水乡意象画布局实战    337
10.3　单列液态框架版式布局    340
10.3.1　使用CSS设计框架结构    340
10.3.2　使用CSS设计单列液态布局    343
10.4　两列版式布局    346
10.4.1　两列版式的布局结构和设计方法    347
10.4.2　两栏浮动版式中兼容固定和自适
应宽度的设计方法和探索    349
10.4.3　两栏浮动版式中自适应宽度的
设计方法和探索    351
10.4.4　两栏浮动版式中兼容性宽度的
设计方法和探索    353
10.4.5　两栏固定版式的设计方法和探索    354
10.4.6　黑色理想网页布局实施实战    355
10.5　三列版式布局    361
10.5.1　三列版式的布局结构和设计方法    361
10.5.2　解析Dreamweaver CS3提供的
绝对定位布局及存在问题    362
10.5.3　三列液态版式的设计新方法和
探索    364
10.5.4　三列固定版式设计方法和探索    366
10.5.5　一列液态两列固定版式设计方法
和探索    367
10.5.6　二列液态一列固定版式设计方法
和探索    369
10.5.7　山鹰之美网页布局实战    370
第11章　CSS框架设计及其案例解析    376
（视频长度：64:48）
11.1　CSS框架设计    376
11.1.1　什么是CSS框架    376
11.1.2　分析CSS框架的优缺点    377
11.1.3　如何设计CSS框架    378
11.2　CSS框架的抽象性及其设计    378
11.2.1　认识CSS的类样式    379
11.2.2　CSS类样式的实施策略    379
11.2.3　通用CSS类样式设计    380
11.2.4　CSS框架中元素默认样式设计    383
11.2.5　CSS框架中其他类型选择符样式
的处理    386
11.3　CSS框架的可维护性及其设计    387
11.3.1　CSS框架的注释技巧及其可读性    387
11.3.2　CSS框架中类名和ID名的可读性    388
11.3.3　CSS框架代码的排版格式应简明
直观    389
11.3.4　框架内样式代码的结构顺序应符合一定的阅读习惯    391
11.4　CSS框架的可扩展性和兼容性及其设计    391
11.4.1　CSS的继承性及其利用    391
11.4.2　CSS框架的继承与包含关系及其
应用    393
11.4.3　通过样式表的分类、组织实现
CSS框架的可扩展性    395
11.4.4　CSS框架的可兼容性    397
11.5　CSS框架案例解析    397
11.5.1　解析Elements CSS框架    398
11.5.2　解析Blueprint CSS框架    401
第12章　购物网站结构与布局实施    409
（视频长度：55:04）
12.1　设计购物网站的基本结构    409
12.1.1　网站内需分析    409
12.1.2　设计网站的基本结构    411
12.1.3　完善语义化结构    413
12.2　使用CSS完成基本结构的布局    415
12.2.1　实施网页基本布局    415
12.2.2　设计滑动门菜单    417
12.2.3　设计圆角区域    419 

网上购买
·卓越
·当当
·互动