CSS网页布局学习笔记的目录
第1篇 CSS技术基础篇
第1章 Web开发标准与网页网站制作介绍
1.1 Web开发标准介绍......................... 3
1.1.1 Web开发标准概述 ...................3
1.1.2为什么要使用
Web标准...............4
1.2 CSS网页布局标准 .......................5
1.3 认识网页和网站.......................... 8
1.3.1何谓网页 ...........................8
1.3.2何谓网站 ...........................9
1.4 网页的基本构成元素..................... 10
1.5 网页的基本制作流程..................... 13
1.6 网站的基本制作流程..................... 14
1.7 小结................................... 17
第2章 HTML与XHTML基础知识
2.1 HTML简介..............................19
2.1.1 HTML概述........................ 19
2.1.2 HTML文档结构.................... 19
2.1.3 HTML语法基础 .................... 19
2.2 XHTML基础.............................21
2.2.1 XHTML概述....................... 21
2.2.2 XHTML的文档结构................. 21
2.2.3 XHTML的基本元素................. 21
2.2.4了解 XHTML语法................... 23
2.3 HTML升级到XHTML ......................29
2.4 XHTML中的CSS应用 .....................32
2.5 正确使用XHTML标签 ....................35
2.6 小结..................................37
第3章CSS基础
3.1 CSS概述...............................39
3.2 基本语法..............................41
3.3 选择符的使用..........................41
3.4 CSS属性的简要介绍 ....................46
3.5 元素简要介绍..........................47
3.6 几个常用值............................48
3.6.1颜色单位 .......................... 48
3.6.2长度单位.......................... 50
3.6.3百分比值 .......................... 51
3.6.4 URL .............................. 51
3.6.5 URL默认值 ........................ 52
3.7 网页中的CSS应用 ......................52
3.7.1页面调用 CSS方式................... 52
3.7.2调用优先级 ........................ 55
3.8 CSS的编码规范.........................59
3.8.1书写规范.......................... 59
3.8.2命名规范.......................... 60
3.9 CSS调试...............................61
3.10 CSS实用技巧..........................64
3.11 小结.................................65
第4章CSS基本应用
4.1 CSS页面头部元素........................ 67
4.1.1选择文档类型 ...................... 67
4.1.2命名空间.......................... 68
4.1.3编码类型 .......................... 68
4.1.4 meta标签 .......................... 68
4.2 CSS声明方法............................ 71
4.3 Style标签.............................. 74
4.4 link与@import.......................... 75
4.5 id与class.............................. 77
4.6 小结................................... 78
第5章CSS网页布局
5.1 网页布局概述........................... 80
5.1.1网页分析和制作流程 ................ 80
5.1.2网页布局理念...................... 81
5.2 table布局.............................. 82
5.3 认识div与span.......................... 86
5.3.1 div与span概述 ...................... 86
5.3.2 div与span的应用.................... 87
5.4 div布局与table布局区别................. 90
5.5 div与css联合应用....................... 92
5.6 CSS布局技巧和排版心得.................. 95
5.7 小结.................................. 100
第6章CSS布局属性
6.1 CSS元素详解........................... 102
6.2 元素的定位............................ 104
6.2.1元素排列 ......................... 104
6.2.2浮动属性定位..................... 108
6.3 定位属性.............................. 109
6.3.1定位模式......................... 109
6.3.2边偏移........................... 109
6.3.3层叠定位属性 ..................... 110
6.3.4定位属性的应用................... 110
6.4 基本内容控制属性...................... 117
6.4.1 display属性........................ 117
6.4.2 visibility属性....................... 119
6.4.3 text-align属性..................... 120
6.4.4 margin属性........................ 121
6.5 页面背景控制.......................... 123
6.5.1页面背景概述..................... 123
6.5.2使用背景颜色..................... 123
6.5.3使用背景图片..................... 123
6.5.4背景颜色和背景图片混用........... 130
6.5.5文本样式设置.................... 133
6.5.6链接样式设置..................... 135
6.6 使用浮动属性.......................... 137
6.6.1浮动属性概述..................... 137
6.6.2相邻固定元素..................... 137
6.6.3相邻两个浮动元素................. 140
6.6.4相邻多个浮动元素................. 141
6.7 清除浮动属性.......................... 143
6.7.1清除浮动属性概述................. 143
6.7.2使用清除浮动属性................. 146
6.8 UL和LI列表控制属性.................... 149
6.8.1使用list-style-type属性............. 149
6.8.2使用list-style-position属性.......... 151
6.8.3使用list-style-image属性............ 153
6.8.4使用list-style属性 .................. 155
6.9 制作导航菜单.......................... 156
6.9.1制作一个纵向导航菜单............. 156
6.9.2制作一个横向导航菜单............. 164
6.10 小结................................. 171
第7章定义容器属性
7.1 CSS盒模型............................. 173
7.1.1盒模型内容....................... 173
7.1.2盒模型背景....................... 174
7.2 使用补白属性.......................... 175
7.2.1补白属性概述..................... 175
7.2.2补白属性的百分比值............... 176
7.2.3单侧补白属性..................... 178
7.2.4实战技巧——简写补白属性......... 180
7.3 使用边框属性.......................... 181
7.3.1使用边框样式属性................. 182
7.3.2使用边框宽度属性................. 184
7.3.3使用边框颜色属性................. 187
7.3.4综合使用边框属性................. 189
7.3.5使用表格边框属性................. 191
7.4 使用边界属性.......................... 193
7.4.1边界属性介绍及使用............... 193
7.4.2使用单侧边界属性................. 195
7.4.3相邻边界属性 ..................... 197
7.4.4在内联元素中使用边界属性 ......... 201
7.5 父子元素距离.......................... 204
7.5.1如果子元素边界为0 ................ 204
7.5.2如果父元素补白为0 ................ 205
7.6 嵌套元素使用负边界.................... 208
7.7 固定元素大小.......................... 210
7.7.1计算盒模型大小................... 210
7.7.2固定长度和宽度................... 211
7.8 小结.................................. 212
第8章CSS文本设置
8.1 文本的缩进和对齐...................... 214
8.1.1缩进段首......................... 214
8.1.2文本下沉与大写................... 216
8.1.3文本对齐......................... 218
8.1.4图文混排对齐处理................. 221
8.2 行高和间隔............................ 223
8.2.1使用行高属性..................... 223
8.2.2文本间隔与空白................... 232
8.2.3文本转换......................... 238
8.3 实现水平和垂直居中.................... 239
8.3.1确定容器内容和大小............... 239
8.3.2未知容器内容和大小............... 241
8.3.3确定容器大小而未知内容........... 243
8.3.4容器大小和内容都未知............. 246
8.3.5背景图片水平垂直居中............. 250
8.4 字体设置.............................. 251
8.4.1字体选择 ......................... 251
8.4.2字体大小......................... 253
8.4.3字体加粗......................... 257
8.4.4字体样式 ......................... 259
8.4.5字体转换......................... 260
8.5 修饰和链接............................ 263
8.5.1修饰文本......................... 263
8.5.2修饰属性的继承................... 265
8.5.3使用链接属性..................... 267
8.5.4小技巧——掌握链接的顺序......... 273
8.5.5链接的继承性..................... 275
8.5.6设置鼠标悬停样式................. 276
8.6 小结.................................. 277
第9章CSS中的图片
9.1 常见图片格式.........................279
9.1.1 GIF格式.......................... 279
9.1.2 JPEG格式......................... 279
9.2 图片的修饰...........................279
9.2.1背景图片修饰..................... 280
9.2.2内容图片修饰..................... 280
9.3 制作一个图片圆角框..................285
9.3.1单色单线圆角框的高度自适用....... 285
9.3.2单色单线圆角框的宽度自适用....... 289
9.3.3圆角框的完全自适用............... 294
9.3.4复杂圆角框的高度自适用........... 298
9.3.5复杂圆角框的完全自适用........... 301
9.4 图片优化.............................305
9.5 小结.................................307
第10章CSS高级应用
10.1 应用自适用特性 .....................309
10.1.1独立元素的自适用................ 309
10.1.2使用背景色自适用................ 311
10.1.3左右自适用的两列布局............ 313
10.1.4某列固定时的自适用.............. 315
10.1.5水平自适用...................... 320
10.2 表单修饰............................323
10.2.1修饰表单文本域.................. 324
10.2.2修饰表单文本区域................ 325
10.2.3修饰表单按钮.................... 327
10.2.4修饰复选框...................... 328
10.2.5修饰单选按钮.................... 329
10.2.6修饰表单列表.................... 330
10.2.7修饰表单文件域.................. 332
10.2.8修饰表单图像域.................. 333
10.3 修饰页面滚条........................334
10.4 修饰表格............................336
10.4.1修饰表格边线和背景.............. 336
10.4.2设置表格的宽度和高度............ 337
10.4.3实现表格的居中.................. 339
10.4.4设置表格内容高度................ 340
10.5 修饰水平线..........................341
10.6 制作一个页面框架 ...................342
10.6.1总体结构分析.................... 343
10.6.2设计页面结构.................... 344
10.6.3编写基础样式.................... 345
10.6.4编写顶部样式.................... 346
10.6.5编写菜单样式.................... 347
10.6.6编写主体样式.................... 348
10.6.7编写底部样式.................... 349
10.7 制作登录框..........................350
10.7.1设计页面结构.................... 351
10.7.2编写基础样式.................... 352
10.7.3编写背景样式.................... 353
10.7.4编写表单样式.................... 354
10.7.5编写底部按钮样式................ 355
10.8 修饰导航栏..........................356
10.8.1修饰纵向导航栏.................. 356
10.8.2修饰导航栏链接.................. 358
10.8.3修饰导航栏文本背景.............. 359
10.8.4修饰横向导航栏.................. 362
10.9 制作一个纵向下拉菜单...............364
10.9.1设计页面结构.................... 365
10.9.2编写基础样式.................... 366
10.9.3编写主导航样式.................. 367
10.9.4编写下拉栏目样式................ 368
10.9.5编写隐藏样式.................... 369
10.9.6编写显示样式.................... 370
10.9.7编写脚本调用代码................ 370
10.10 制作一个横向下拉菜单..............371
10.10.1设计页面结构................... 373
10.10.2编写主导航样式................. 374
10.10.3编写下拉菜单样式............... 375
10.10.4编写兼容样式................... 376
10.10.5编写显示样式................... 376
10.10.6编写脚本调用代码............... 376
10.11 制作一个完整页面..................378
10.11.1 Photoshop切片................... 379
10.11.2设计上部导航部分............... 380
10.11.3设计中间内容部分............... 384
10.11.4设计底部版权部分............... 390
10.12 小结...............................393
第2篇 基本应用和提高篇
第11章CSS实战与技巧
11.1 制作复杂圆角框....................... 397
11.1.1图片圆角框...................... 397
11.1.2纯CSS圆角框..................... 400
11.2 滑动门设计........................... 404
11.3 切换网站样式......................... 408
11.3.1设计页面结构.................... 409
11.3.2编写不同样式.................... 410
11.3.3页面脚本调用.................... 413
11.4 实现柱形图........................... 415
11.4.1进度条效果...................... 415
11.4.2统计柱形图...................... 418
11.5 Flash应用............................ 423
11.5.1设计页面结构.................... 423
11.5.2编写设置样式.................... 424
11.5.3编写脚本调用程序................ 426
11.5.4插入Flash ........................ 427
11.5.5消除遮盖........................ 428
11.6隐藏显示标签页....................... 428
11.6.1设计页面结构.................... 429
11.6.2编写整体样式.................... 430
11.6.3编写标题样式.................... 431
11.6.4编写列表样式.................... 432
11.6.5编写链接样式.................... 432
11.6.6编写悬停样式.................... 433
11.7特效处理............................. 434
11.7.1准备页面素材.................... 435
11.7.2设计页面结构.................... 435
11.7.3编写链接样式.................... 436
11.7.4编写悬停样式.................... 437
11.8小提示窗口........................... 438
11.8.1功能介绍........................ 438
11.8.2设计页面结构.................... 439
11.8.3编写整体样式.................... 440
11.8.4 编写提示标记样式................ 440
11.8.5编写显示提示样式................ 440
11.9JavaScript应用....................... 441
11.9.1 JavaScript概述.................... 442
11.9.2 JavaScript应用实例................ 442
11.10小结................................ 447
第12章不同浏览器的兼容性解析
12.1 浏览器兼容性介绍 ...................449
12.1.1常用浏览器介绍.................. 449
12.1.2遵循的原则...................... 449
12.2使用!important .....................450
12.3解决水平居中问题 ...................452
12.4解决非浮动内容和容器的问题.........454
12.5解决浮动问题........................457
12.6默认宽度的并列浮动元素.............460
12.7嵌套元素的叠加问题.................462
12.7.1嵌套元素均没有定义宽度和高度.... 462
12.7.2设置子元素宽度.................. 463
12.7.3设置父元素宽度.................. 464
12.7.4解决方法........................ 466
12.8 子元素的负边界问题.................470
12.9 列表默认显示问题 ...................472
12.9.1列表默认显示问题介绍............ 472
12.9.2取消列表默认显示问题............ 474
12.10 IE 6.0的识别问题..................475
12.10.1浮动元素的双边距问题........... 475
12.10.2浮动元素的零边距问题........... 477
12.10.3解决方法....................... 477
12.10.4浮动列表问题................... 479
12.10.5图片空隙问题................... 481
12.11 IE 7.0的识别问题..................483
12.11.1 !important支持................... 483
12.11.2内容和容器的关系............... 483
12.11.3嵌套问题....................... 485
12.11.4浮动子元素问题................. 487
12.12 Opera下的CSS技巧..................489
12.13 常见兼容性技巧....................490
12.14 小结..............................492
第13章 CSS可视化开发
13.1 可视化开发工具介绍.................494
13.1.1 Frontpage介绍.................... 494
13.1.2 Dreamweaver介绍................. 495
13.2Frontpage中的CSS可视化开发.........498
13.3Dreamweaver中的CSS可视化开发.......502
13.4Visual Studio 2005中的CSS可视化开发............................... 505
13.5Developer Toolbar使用介绍..........508
13.5.1 Developer Toolbar的安装........... 509
13.5.2 Developer Toolbar使用概要......... 510
13.6 小结................................511
第3篇 综合实战篇
第14章 个人博客网站开发实例
14.1 网站规划............................515
14.1.1站点需求分析.................... 515
14.1.2预期效果分析.................... 515
14.1.3站点结构规划.................... 517
14.2 切图分析............................517
14.3 制作站点首页........................518
14.3.1实现流程分析.................... 518
14.3.2制作顶部导航.................... 519
14.3.3设计中间内容部分................ 523
14.3.4制作底部版权部分................ 529
14.4 制作日志页面........................531
14.4.1实现流程分析.................... 532
14.4.2日志内容实现 .................... 532
14.5 制作日志详情页面 ...................533
14.5.1实现流程分析.................... 534
14.5.2页面具体实现.................... 534
14.6 小结................................538
第15章 企业网站开发实例
15.1 网站规划............................540
15.1.1站点需求分析.................... 540
15.1.2预期效果分析.................... 540
15.1.3页布局分析...................... 542
15.2 切图分析............................542
15.3 首页实现............................543
15.3.1实现流程分析.................... 543
15.3.2制作页面头部.................... 543
15.3.3制作页面主体.................... 547
15.3.4制作页面底部.................... 556
15.3.5解决兼容性问题.................. 557
15.4 二级页面实现........................558
15.5 小结................................560
