收藏

查看我的收藏

0

CSS网页布局学习笔记

CSS网页布局学习笔记全书内容分为 3部分，共15章，其中第 1-10章为第 1部分，依次讲解了 Web开发标准与网页网站制作，出版时间： 2008-10-1

书    名 CSS网页布局学习笔记 作    者  王大平 页    数 576页 出版社 电子工业出版社

目录

1

2

3

4

5

网页布局信息

作　 者：王大平

出 版 社：电子工业出版社

页　 数：576页

开 　本：16开

I S B N ： 9787121070150

分 类： 图书 >> 计算机>>网页设计

定 价：￥62.00元（含光盘 1张）

内容简介

Web标准布局的本质、XHTML书写规范、CSS基础与书写规范、网页头部元素的详细定义、CSS基本布局属性、CSS容器属性、CSS定义文本属性、元素的修饰和 CSS常见应用、浏览器及兼容问题、整站样式表的分析、CSS高级应用等知识；第11-13章为第 2部分，讲解了 CSS高级应用，CSS实战与技巧，CSS可视化开发技术等内容；第14章和 15章为第 3部分，分别通过个人博客网站和企业网站的实现流程，介绍 CSS布局的综合应用流程和实现技巧。

本书适合广大 Web网站设计人员、网站设计的初学者、网站管理维护人员、大中专院校的学生和社会培训学员阅读。

本书独一无二的优势

本书由具有多年开发经验的程序员执笔写作，笔者在 Web 2.0领域具有多年的开发研究经验，并且具有多年的培训讲解经验，尤其熟识Web 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新技术给开发人员带来的视觉冲击。读者通过本篇的实践性内容的学习后，完全可以走上工作岗位。

致谢

本书由北京城市学院老师王大平编写，在编写过程中，温才燚，李振捷，管西京，宗杰，刘冉等提供了很大的帮助，在此，对他们表示衷心的感谢。由于时间仓促，加上作者水平有限，书中难免存在一些不足和错误之处，敬请读者见谅，

目录

第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

词条标签：

计算机学 ， 书籍