CSS设计彻底研究

第1章　(X)HTML与CSS核心基础　1
1.1　HTML与XHTML　2
1.1.1　追根溯源　2
1.1.2　DOCTYPE(文档类型)的含义与选择　3
1.1.3　XHTML与HTML的重要区别　4
1.2　(X)HTML与CSS　6
1.2.1　CSS标准简介　6
1.2.2　在HTML中引入CSS的方法　7
1.3　基本CSS选择器　10
1.3.1　标记选择器　11
1.3.2　类别选择器　12
1.3.3　ID选择器　15
1.4　复合选择器　16
1.4.1　“交集”选择器　16
1.4.2　“并集”选择器　18
1.4.3　后代选择器　20
1.5　CSS的继承特性　22
1.5.1　继承关系　22
1.5.2　CSS继承的运用　24
1.6　CSS的层叠特性　26
1.7　本章小结　28
第2章　“CSS禅意花园”作品鉴赏　29
2.1　“CSS禅意花园”简介　30
2.2　郊野——两列布局　33
2.3　像素画——三列布局　34
2.4　百合池塘——三列布局变体　35
2.5　郁金香——多列布局　36
2.6　日与夜——包含圆角的设计　36
2.7　Si6——包含倾斜的设计　38
2.8　清茶时光——装饰性设计　39
2.9　爱之空气——流体布局　40
2.10　谷香——食品主题设计　41
2.11　城市——建筑主题设计　41
2.12　“卡通版”禅意花园——特色效果　42
2.13　收音机——特色效果　43
2.14　杀手风格——特色效果　44
2.15　海底世界——特色效果　45
2.16　博物馆——特色设计　47
2.17　剧院效果——特色效果　48
2.18　本章小结　48
第3章　深入理解盒子模型3　49
3.1　盒子的内部结构　50
3.2　边框(border)　51
3.2.1　实验1——border-style 　52
3.2.2　属性值的简写形式　53
3.2.3　实验2——属性的缩写形式　54
3.2.4　实验3——边框与背景　55
3.3　内边距(padding)　56
3.4　外边距(margin)　57
3.5　盒子之间的关系　59
3.5.1　HTML与DOM　59
3.5.2　标准文档流　62
3.5.3　<div>标记与<span>标记　63
3.6　盒子在标准流中的定位原则　65
3.6.1　实验1——行内元素之间的水平margin　66
3.6.2　实验2——块级元素之间的竖直margin　67
3.6.3　实验3——嵌套盒子之间的margin　68
3.6.4　实验4——将margin设置为负值　70
3.7　CSS中的几何题　71
3.8　本章小结　74
第4章　盒子的浮动与定位4　75
4.1　盒子的浮动　76
4.1.1　准备代码　76
4.1.2　实验1——设置第1个浮动的div　77
4.1.3　实验2——设置第2个浮动的div　78
4.1.4　实验3——设置第3个浮动的div　79
4.1.5　实验4——改变浮动的方向　79
4.1.6　实验5——再次改变浮动的方向　80
4.1.7　实验6——全部向左浮动　81
4.1.8　实验7——使用clear属性清除浮动的影响　82
4.1.9　实验8——扩展盒子的高度　83
4.2　盒子的定位　84
4.2.1　static(静态定位)　85
4.2.2　relative(相对定位)　86
4.2.3　absolute(绝对定位)　90
4.2.4　fixed(固定定位)　97
4.3　z-index空间位置　97
4.4　盒子的display属性　97
4.5　本章小结　99
第5章　文字与图像　101
5.1　CSS文字样式　102
5.1.1　准备网页　102
5.1.2　设置字体　103
5.1.3　文字大小　104
5.1.4　行高　106
5.1.5　文字颜色与背景颜色　108
5.1.6　文字加粗、倾斜与大小写　109
5.1.7　文字的装饰效果　110
5.1.8　文字的水平对齐方式与段首缩进设置　111
5.1.9　文字布局　111
5.1.10　段落的垂直对齐方式　112
5.2　CSS图像样式　115
5.2.1　基本设置　115
5.2.2　背景图像　116
5.2.3　标题的图像替换　120
5.2.4　为图像增加投影效果　125
5.3　本章小结　133
第6章　链接与导航　135
6.1　丰富的超链接特效　136
6.1.1　动态超链接　136
6.1.2　按钮式超链接　137
6.1.3　CSS控制鼠标指针　139
6.1.4　浮雕背景超链接　140
6.1.5　让下划线动起来　143
6.2　项目列表　144
6.2.1　列表的符号　144
6.2.2　图片符号　146
6.3　简单的导航菜单　148
6.3.1　简单的竖直排列菜单　148
6.3.2　横竖自由转换菜单　151
6.4　本章小结　152
第7章　竖直排列的导航菜单　153
7.1　双竖线菜单　154
7.1.1　HTML框架　154
7.1.2　设置容器的CSS样式　155
7.1.3　设置菜单项的CSS样式　156
7.1.4　解决出现的问题　157
7.2　双斜角横线菜单　160
7.2.1　基本设置　161
7.2.2　菜单项设置　162
7.3　立体菜单　163
7.3.1　基本设置　164
7.3.2　菜单项设置　164
7.4　箭头菜单　166
7.4.1　基本思路　166
7.4.2　基本设置　168
7.4.3　设置箭头效果　169
7.5　带说明信息的菜单　172
7.5.1　基本思路　172
7.5.2　设置方法　173
7.6　本章小结　175
第8章　水平导航菜单　177
8.1　自适应的水平菜单　178
8.2　自适应的斜角水平菜单　180
8.2.1　基本思路　180
8.2.2　基本设置　181
8.2.3　设置斜角效果　182
8.2.4　设置鼠标经过效果　184
8.3　应用滑动门技术的玻璃效果菜单　185
8.3.1　基本思路　185
8.3.2　设置菜单整体效果　186
8.3.3　使用“滑动门”技术设置玻璃材质背景　187
8.3.4　进一步解决的问题　189
8.4　三状态玻璃效果菜单(双层滑动门应用)　192
8.4.1　设置菜单整体效果　192
8.4.2　设置第一层滑动门　193
8.4.3　设置第二层滑动门　195
8.4.4　设置表示当前页面的菜单项　195
8.4.5　进一步解决的问题　196
8.5　不使用图像的圆角菜单　197
8.5.1　实现圆角效果　197
8.5.2　用列表进行改造　200
8.5.3　设置鼠标响应效果　202
8.6　会跳起的多彩菜单　203
8.6.1　实现跳起效果　203
8.6.2　实现多彩效果　205
8.6.3　本案例的完整代码　206
8.6.4　实现向下弹出效果　210
8.7　本章小结　211
第9章　下拉菜单　213
9.1　HTML中的dl、dt和dd标记　214
9.2　菜单的HTML结构　215
9.3　对整体进行设置　216
9.4　对dl进行设置　217
9.5　对主菜单项(dt)进行设置　218
9.6　对子菜单项(dd)进行设置　219
9.7　对鼠标响应进行设置　220
9.8　实现主菜单项的不同颜色　222
9.9　IE 6兼容　223
9.10　本章小结　227
第10章　表格也精彩　229
10.1　控制表格　230
10.1.1　表格中的标记　230
10.1.2　表格的边框　232
10.1.3　表格宽度的确定　236
10.1.4　其他与表格相关的标记　236
10.2　美化表格　237
10.2.1　搭建HTML结构　238
10.2.2　整体设置　239
10.2.3　设置单元格样式　239
10.2.4　隔行变色　240
10.2.5　设置列样式　241
10.3　鼠标指针经过时整行变色提示的表格　243
10.3.1　搭建HTML结构　244
10.3.2　在Firefox和IE 7中实现鼠标指针经过时整行变色　245
10.3.3　在IE 6中实现鼠标指针经过时整行变色　246
10.4　Excel方式二维变色提示的表格　247
10.4.1　改造CSS代码　247
10.4.2　改造JavaScript代码　248
10.5　多视图模式日历案例概述　250
10.6　制作中视图模式　253
10.6.1　搭建HTML结构　253
10.6.2　设置整体样式和表头样式　254
10.6.3　设置日历单元格样式　255
10.6.4　总结经验　258
10.7　制作小视图模式　259
10.7.1　整体设置　259
10.7.2　为IE 7和Firefox制作鼠标指针经过时弹出的信息框　260
10.7.3　为IE 6制作鼠标指针经过时弹出的信息框　263
10.8　制作大视图模式　265
10.8.1　通过display属性改变盒子的类型　265
10.8.2　设置日程安排项目　267
10.9　本章小结　269
第11章　圆角设计　271
11.1　圆角框的作用　272
11.2　固定宽度圆角框　273
11.2.1　两背景图像法　273
11.2.2　使用透明背景图　276
11.2.3　带边框的固定宽度圆角框　277
11.2.4　单背景图像的带边框固定宽度圆角框　279
11.3　不固定宽度的圆角框　281
11.3.1　不固定宽度圆角框的含义　281
11.3.2　“4图像”单色不固定宽度圆角框　282
11.3.3　“4图像滑动门”单色不固定宽度圆角框　285
11.4　“5图像”二维滑动门经典圆角框　288
11.4.1　准备图像　289
11.4.2　搭建HTML结构　290
11.4.3　放置背景图像　291
11.4.4　设置样式并修复缺口　292
11.4.5　在整体页面中使用圆角框　294
11.4.6　实现网页换肤　296
11.5　本章小结　299
第12章　应用Spry制作高级网页组件　301
12.1　Tab菜单与Tab面板简介　302
12.2　Tab菜单　303
12.2.1　搭建HTML结构　303
12.2.2　设置整体的样式　304
12.2.3　设置Tab的样式　304
12.2.4　设置当前页的Tab样式　306
12.3　借助于Spry实现Tab面板　307
12.3.1　建立基本的Tab面板　308
12.3.2　准备背景图片　310
12.3.3　设置整体的CSS样式　310
12.3.4　设置单个Tab的CSS样式　311
12.3.5　设置单个Tab的滑动门背景　312
12.3.6　设置鼠标经过效果　313
12.3.7　设置当前页效果　314
12.3.8　设置Tab页内容的CSS样式　315
12.3.9　鼠标经过时换页　316
12.4　折叠面板　317
12.4.1　建立基本的折叠面板　317
12.4.2　准备背景图片　318
12.4.3　整体设置　318
12.4.4　设置折叠面板的标题　319
12.4.5　设置折叠面板的初始状态　320
12.4.6　设置展开状态的标题背景　321
12.4.7　设置鼠标经过时的标题背景　322
12.5　伸缩面板　323
12.5.1　建立基本的伸缩面板　323
12.5.2　设置标题的样式　324
12.5.3　对最上面的标题进行特殊处理　325
12.6　本章小结　327
第13章　固定宽度布局剖析与制作　329
13.1　CSS排版观念　330
13.1.1　MSN的首页　330
13.1.2　Yahoo.com 　331
13.1.3　Times.com 　331
13.1.4　CNN.com　332
13.1.5　163.com 　333
13.2　单列布局　334
13.2.1　放置第一个圆角框　335
13.2.2　设置圆角框的CSS样式　335
13.2.3　放置其他圆角框　338
13.3　“1-2-1”固定宽度布局　340
13.3.1　准备工作　340
13.3.2　绝对定位法　342
13.3.3　浮动法　343
13.4　“1-3-1”固定宽度布局　346
13.5　“1-((1-2)+1)-1”固定宽度布局　348
13.6　魔术布局　350
13.6.1　制作步骤　351
13.6.2　修正缺陷　353
13.7　本章小结　356
第14章　变宽度网页布局剖析与制作　359
14.1　“1-2-1”变宽度网页布局　360
14.1.1　“1-2-1”等比例变宽布局　360
14.1.2　“1-2-1”单列变宽布局　362
14.2　“1-3-1”宽度适应布局　367
14.2.1　“1-3-1”三列宽度等比例布局　367
14.2.2　“1-3-1”单侧列宽度固定的变宽布局　367
14.2.3　“1-3-1”中间列宽度固定的变宽布局　370
14.2.4　进一步的思考　373
14.2.5　“1-3-1”双侧列宽度固定的变宽布局　373
14.2.6　“1-3-1”中列和侧列宽度固定的变宽布局　376
14.3　变宽布局方法总结　378
14.4　分列布局背景色问题　379
14.4.1　固定宽度布局的列背景色设置　380
14.4.2　特殊宽度变化布局的列背景色设置　384
14.4.3　单列宽度变化布局的列背景色设置　384
14.4.4　多列等比例宽度变化布局的列背景色设置　385
14.5　CSS排版与传统的表格方式排版的分析　388
14.6　本章小结　390
第15章　“CSS禅意花园”作品研究　393
15.1　“禅意花园”页面HTML结构分析　394
15.2　亲自动手　397
15.2.1　结构分析　397
15.2.2　整体设置　398
15.2.3　设置页头　399
15.2.4　设置supportingText部分和linkList部分　401
15.3　禅意花园作品的赏析与借鉴方法指导　403
15.3.1　191号作品分析　404
15.3.2　026号作品　411
15.3.3　175号作品　413
15.4　本章小结　414
第16章　综合案例研究　415
16.1　《简约夕阳》(158号作品)布局方法剖析　416
16.1.1　设置渐变的页面背景　417
16.1.2　设置整体结构　419
16.1.3　设置linkList　420
16.1.4　设置各个部分的标题　420
16.1.5　设置footer　422
16.1.6　本案例的总结　423
16.2　《日记》(191号作品)布局方法剖析　423
16.2.1　准备图片　424
16.2.2　设置页头　426
16.2.3　设置supportingText部分　430
16.2.4　设置linkList部分　432
16.2.5　本案例总结　434
16.3　本章小结　434
第17章　从学习到创作　435
17.1　拍摄素材照片　436
17.2　在图像软件中设计方案　438
17.3　整体的结构分析　440
17.4　CSS样式设计与编码　442
17.5　修改新页面方案　448
17.6　本章小结　449
附录　CSS英文小字典　451