CSS网页布局学习笔记_在线百科全书查询
CSS网页布局学习笔记
图书信息
作 者： 王大平 编著
出 版 社： 电子工业出版社
出版时间： 2008-10-1
页 数： 576页
开 本： 16开
I S B N ： 9787121070150
分类： 图书 >> 计算机>>网页设计
定价：￥62.00元（含光盘 1张）
内容简介
本书由浅入深地讲解了CSS开发技术，并且始终遵循 Web标准来讲解各知识点的应用，并通过具体的实例来讲解其具体使用流程。全书内容分为 3部分，共15章，其中第 1-10章为第 1部分，依次讲解了 Web开发标准与网页网站制作，Web标准布局的本质、XHTML书写规范、CSS基础与书写规范、网页头部元素的详细定义、CSS基本布局属性、CSS容器属性、CSS定义文本属性、元素的修饰和 CSS常见应用、浏览器及兼容问题、整站样式表的分析、CSS高级应用等知识；第11-13章为第 2部分，讲解了 CSS高级应用，CSS实战与技巧，CSS可视化开发技术等内容；第14章和 15章为第 3部分，分别通过个人博客网站和企业网站的实现流程，介绍 CSS布局的综合应用流程和实现技巧。
本书适合广大 Web网站设计人员、网站设计的初学者、网站管理维护人员、大中专院校的学生和社会培训学员阅读。
本书独一无二的优势
本书由具有多年开发经验的程序员执笔写作，笔者在 Web 2.0领域具有多年的开发研究经验，并且具有多年的培训讲解经验，尤其熟识Ｗeb 2.0标准理论知识体系，笔者凭着娴熟的笔法和渊博的理论知识，将CSS网页布局技术展现得淋漓尽致，使读者能够很快地进入实际开发角色。本书和市场上其他类似书籍相比，具有下面与众不同的特色。
形象
本书对书中的源代码采取绘图的讲解方式，使抽象变形象，让高深的编程理论“赤裸裸”地展现在你的面前，使你能够轻而易举地领悟编程奥秘。这是本书最大的特色。
趣味
本书用拉链做素材，拉开学习的帷幕，用情趣似的学习笔记形式带你走进轻松的学习课堂，并且在书中让人感觉到烦躁的地方搭配以相关的图片，让你享受到学习中的乐趣，探索中的喜悦，胜
利后的兴奋。
实用
本书的实用性较强，以实例为导向，由浅入深地讲解了CSS网页布局中的种种问题。特别是，在讲解时非常注重实践与理论的形象结合，为了能使读者通过读懂源代码来掌握CSS技术，在实例举证时还给源代码绘了大量的流程图。本书的所有源代码都已调试通过，并且放在了本书所附带的光盘中，读者拿来即可使用。
全面
本书内容全面，从基本的语法入手，以恰当的实例为导向，由浅入深地讲解CSS技术的基本理论知识，所讲解的内容几乎囊括了CSS技术的所有知识点，读者读完此书几乎能够掌握CSS所有的开发技术。
前言
计算机软件技术的日新月异推动了社会信息化的进程，这也使得开发人员不得不学习新的技术以适应这种局面。在Web应用领域，随着网络技术的发展，各种站点纷纷建立。并且因为网络的无限性和共享性，以及各种设计软件的推出，多样化的站点展示方式便应运而生。为保证各种用户和各类软件设计出的站点信息完整的展现在用户面前，Web标准技术便应运而生。
作为传统网页布局和修饰方式，越来越落后于时代潮流，逐渐被新兴的Web标准所代替。而作为Web标准的 CSS技术，迅速成为了当今Web发展的主要因素。随着Web标准的大力推广宣传，Web标准逐渐被网站设计者所认可，越来越多的站点改版成为了符合标准的版本。Web标准能够被广大用户所迅速认可，是因为它能够给用户带来真正的好处。它不但能更加方便地实现对页面的维护，而且还能加快页面的显示速度，提高浏览者的积极性，实现了搜索引擎的优化。
随着2005年Web 2.0的提出，给Web开发带来了巨大的革新和冲击。由于Web 2.0是建立在Web标准基础之上的，所以在很大程度上推动了Web标准的发展。随着当前硬件技术和软件技术的进步，Web标准页面的前景将变得更加光明。
本书读者对象
本书在内容安排上从浅入深，充分实例举证，非常适合需要使用CSS进行网页布局的网站开发
入门者，也可以作为网站开发者常备的一本CSS备查手册。本书适合以下类型的读者：
没有任何网站开发基础，欲学习网站开发的初学者。
有一定Web编程基础，欲学习使用CSS网页布局技术的初学者。
有丰富的Web编程经验，且经常要参与网站开发的Web程序员，本书可作为他们的常用参考手册。
本书内容结构
本书以Web 2.0版本作为讲解对象，从基本的语法和规范入手，以恰当的实例为导向，从浅入深介绍CSS技术的基本理论知识及应用系统开发的实践经验。本书一共3篇15章。分别如
下：
第一篇“CSS技术基础篇”包括第1到10章，主要讲解了CSS技术的基础知识。其中包括Web开发标准与网页网站制作介绍，HTML与XHTML基础知识，CSS基础与语法介绍，CSS基本应用知识，CSS网页布局，CSS布局属性介绍，CSS容器属性介绍，CSS文本设置知识，CSS的图片修饰知识。为读者步入后面的知识下坚实的基础。
第二篇“基本应用和提高篇”包括第11到13章，主要讲解了CSS技术的基本应用知识。内容包括CSS高级应用，CSS实战与技巧,不同浏览器的兼容性与解析，CSS可视化开发技术。在介绍过程中始终贯穿基础知识，使读者从实践中掌握真谛。
第三篇“综合实战篇”包括第14和15章，介绍了个人博客网站开发实例和企业网站开发实例的全过
程。读者通过本篇的学习可以完全掌握CSS囊括的所有新技术，能够真正体会到CSS新技术给开发人员带来的视觉冲击。读者通过本篇的实践性内容的学习后，完全可以走上工作岗位。
注：本书所用素材和代码请到www.broadview.com.cn下载。
致谢
本书由北京城市学院老师王大平编写，在编写过程中，温才燚，李振捷，管西京，宗杰，刘冉等提供了很大的帮助，在此，对他们表示衷心的感谢。由于时间仓促，加上作者水平有限，书中难免存在一些不足和错误之处，敬请读者见谅，本书的服务网站是http://www.cx-pub.com，读者遇到问题时可以到网站的相关论坛参与讨论。
目录
第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
