第1章 CSS设计准备 2
1.1 Web标准基本概念 2
1.1.1网页结构 2
1.1.2网页布局 2
1.1.3网页行为 3
1.2准备学习CSS 3
1.2.1彻底掌握CSS的难点 3
1.2.2网页制作和CSS布局思路相反 4
1.2.3布局找灵感:CSS禅意花园 4
1.2.4网页显示不要忘记移动设备 5
1.3认识浏览器 7
1.4准备好CSS编辑器 8
1.4.1认识【CSS样式】面板 8
1.4.2定义CSS样式 10
1.4.3应用CSS样式 12
1.4.4 CSS可视化渲染 14
1.4.5 CSS可视化编辑 16
1.4.6 CSS辅助工具 18
第2章 HTML基础 22
2.1认识网页结构 22
2.1.1 XHTML文档 22
2.1.2定义文档类型 23
2.1.3声明命名空间 23
2.1.4 XHTML语法 24
2.1.5 XHTML元素 25
2.1.6把握XHTML常用结构元素 26
2.1.7把握XHTML结构的语义性 29
2.1.8构建语义化页面 30
2.1.9案例实战:构建一个符合语义的页面结构 30
2.2 DIV和Span应用 32
2.2.1比较DIV和Span 32
2.2.2 div和span优势:弱语义元素 32
2.2.3 div和span优势:无特殊样式元素 33
2.2.4 div和span优势:浏览器通用元素 35
2.2.5案例实战:使用DIV 35
2.2.6案例实战:DIV嵌套 37
2.2.7案例实战:使用Span 40
2.3 ID和Class应用 42
2.3.1使用ID 42
2.3.2比较ID和Name 44
2.3.3使用Class 45
2.3.4比较ID和Class 48
第3章 CSS基础 50
3.1编写第一个CSS样式 50
3.1.1解析CSS样式 52
3.1.2定义CSS样式表 53
3.1.3 CSS注释 53
3.2 CSS类型 55
3.2.1行内样式 55
3.2.2内嵌式 56
3.2.3链接式 59
3.2.4导入样式 60
3.2.5各种方式的优先级 61
3.3 CSS样式结构 62
3.4 CSS基本选择器 63
3.4.1标记选择器 63
3.4.2类别选择器 64
3.4.3 ID选择器 68
3.5复合选择器 69
3.5.1包含选择器 70
3.5.2子选择器 72
3.5.3相邻选择器 73
3.5.4属性选择器 75
3.5.5伪选择器 77
3.5.6集体声明 79
3.6层叠与继承 81
3.6.1 CSS的层叠性 81
3.6.2 CSS层叠实例代码分析 83
3.6.3 CSS的继承性 84
3.6.4 CSS继承与层叠的运用 86
3.6.5 CSS继承与层叠实例代码分析 87
第4章 网站布局初步 90
4.1盒模型 90
4.1.1为什么要提出盒模型 90
4.1.2盒模型结构模拟 91
4.1.3盒模型的宽和高 92
4.1.4盒模型并列间距 95
4.1.5盒模型垂直间距 97
4.1.6空盒模型 99
4.2定义边框样式 100
4.2.1定义边框宽度 101
4.2.2定义边框颜色 102
4.2.3定义边框样式 102
4.2.4分析内联元素的边框 104
4.3定义边界距离 106
4.3.1恰当选择边界值:auto 107
4.3.2恰当选择边界值:百分比 107
4.3.3恰当选择边界值:负值 109
4.3.4警惕元素边界重叠:上边元素不浮动,下边元素浮动 111
4.3.5警惕元素边界重叠:上边元素浮动,下边元素不浮动 112
4.3.6警惕元素边界重叠:一个元素包含另一个元素 113
4.3.7警惕元素边界重叠:单一边界的空元素 116
4.3.8警惕元素边界重叠结论 117
4.3.9内联元素的边界 117
4.4定义补白空间 118
4.5 IE怪异模式与对策 120
4.5.1认识浏览器的解析模式 121
4.5.2判断拥有DOCTYPE声明的网页 121
4.5.3 IE 6元素浮动时边界错位 122
4.5.4让父元素自适应子元素高度 123
4.5.5 IE 6子元素底边界不被解析 124
4.5.6 IE 6的子元素溢出 125
第5章 儿童教育类网站布局与设计 128
5.1网站展示 128
5.2产品策划 129
5.3画板和设计 130
5.4切图和输出 135
5.5网站重构 136
5.6网站布局 139
第6章 孕妇婴儿类网站布局与设计 151
6.1网站展示 151
6.2产品策划 152
6.3画板和设计 152
6.4切图和输出 157
6.5网站重构 159
6.6网站布局 161
第7章 政府服务类网站布局与设计 175
7.1网站展示 175
7.2产品策划 176
7.3画板和设计 177
7.4切图和输出 182
7.5网站重构 184
7.6网站布局 186
第8章 校园活动类型网站布局与设计 199
8.1网站展示 199
8.2产品策划 200
8.3画板和设计 201
8.4切图和输出 203
8.5网站重构 205
8.6网站布局 207
第9章 地区门户类网站布局与设计 215
9.1网站展示 215
9.2产品策划 216
9.3画板和设计 217
9.4切图和输出 222
9.5网站重构 224
9.6网站布局 226
第10章 知音女性类网站布局与设计 238
10.1网站展示 238
10.2产品策划 239
10.3画板和设计 240
10.4切图和输出 243
10.5网站重构 245
10.6网站布局 248
第11章 建筑房产类型网站布局与设计 261
11.1网站展示 261
11.2产品策划 262
11.3画板和设计 263
11.4切图和输出 266
11.5网站重构 269
11.6网站布局 271
第12章 体育运动类网站布局与设计 280
12.1网站展示 280
12.2产品策划 281
12.3画板和设计 281
12.4切图和输出 286
12.5网站重构 287
12.6网站布局 290
第13章 健康医疗类网站布局与设计 299
13.1网站展示 299
13.2产品策划 300
13.3画板和设计 301
13.4切图和输出 305
13.5网站重构 306
13.6网站布局 308
第14章 交际交友类型网站布局与设计 325
14.1网站展示 325
14.2产品策划 326
14.3画板和设计 327
14.4切图和输出 332
14.5网站重构 333
14.6网站布局 336
第15章 微博类网站布局与设计 347
15.1网站展示 347
15.2产品策划 348
15.3画板和设计 349
15.4切图和输出 352
15.5网站重构 355
15.6网站布局 357
第16章 团购类型网站布局与设计 367
16.1网站展示 367
16.2产品策划 368
16.3画板和设计 369
16.4切图和输出 373
16.5网站重构 375
16.6网站布局 377
第17章 威客类型网站布局与设计 388
17.1网站展示 388
17.2产品策划 389
17.3画板和设计 390
17.4切图和输出 394
17.5网站重构 396
17.6网站布局 399
第18章 维科类型网站布局与设计 413
18.1网站展示 413
18.2产品策划 414
18.3画板和设计 415
18.4切图和输出 419
18.5网站重构 421
18.6网站布局 423
第19章 博客类型网站布局与设计 433
19.1网站展示 433
19.2产品策划 434
19.3画板和设计 434
19.4切图和输出 439
19.5网站重构 441
19.6网站布局 443
第20章 论坛类网站布局与设计 454
20.1网站展示 454
20.2产品策划 455
20.3画板和设计 456
20.4切图和输出 460
20.5网站重构 461
20.6网站布局 464
第21章 播客类型网站布局与设计 473
21.1网站展示 473
21.2产品策划 474
21.3画板和设计 474
21.4切图和输出 479
21.5网站重构 482
21.6网站布局 485
第22章 分类信息类网站布局与设计 495
22.1网站展示 495
22.2产品策划 496
22.3画板和设计 496
22.4切图和输出 500
22.5网站重构 501
22.6网站布局 503
第23章 掘客类型网站布局与设计 509
23.1网站展示 509
23.2产品策划 510
23.3画板和设计 510
23.4切图和输出 515
23.5网站重构 516
23.6网站布局 519
第24章 换客类型网站布局与设计 529
24.1网站展示 529
24.2产品策划 530
24.3画板和设计 530
24.4切图和输出 535
24.5网站重构 536
24.6网站布局 538
第25章SNS类网站布局与设计 547
25.1网站展示 547
25.2产品策划 548
25.3画板和设计 549
25.4切图和输出 552
25.5网站重构 554
25.6网站布局 556
第26章 手机应用类型网站布局与设计 564
26.1网站展示 564
26.2产品策划 565
26.3画板和设计 566
26.4切图和输出 569
26.5网站重构 570
26.6网站布局 572
第27章 点评类网站布局与设计 582
27.1网站展示 582
27.2产品策划 583
27.3画板和设计 584
27.4切图和输出 587
27.5网站重构 588
27.6网站布局 591
第28章 黄页类网站布局与设计 599
28.1网站展示 599
28.2产品策划 600
28.3画板和设计 601
28.4切图和输出 605
28.5网站重构 606
28.6网站布局 609