CSS+DIV网页样式与布局从入门到精通

作者简介

《CSS+DIV网页样式与布局从入门到精通》编辑推荐：“网络开发视频大讲堂”丛书系清华社“视频大讲堂”重点大系之一。该大系包括多个子系列，每个子系列的图书在其同品种的图书中销售名列前茅，其中：4个品种荣获“全行业优秀畅销品种”；1个品种荣获2012年清华大学出版社“专业畅销书”一等奖；绝大多数品种在“全国计算机零售图书排行榜”同品种排行中名列前茅，截至目前该大系累计销售超过55万册。该大系已成为近年来清华社计算机专业基础类零售图书最畅销的品牌之一。

“网络开发视频大讲堂”系列作为清华社“视频大讲堂”大系的子系列之一，继承和创新了清华社“视频大讲堂”大系的编写模式、写作风格和优良品质。突出了以下内容：216节大型高清同步视频演示讲解，可反复观摩，让学习更为快捷、高效；218个中小典型实例，通过实例学习更深入，更有趣，更有动力；51个综合实战案例，展现工作过程，积累工作经验；11部网页开发参考手册，CSS2.0参考手册，CSS3.0参考手册，JavaScript参考手册，JavaScript核心参考，jQuery1.7中文手册，jQuery1.3参考手册，jQuery1.4参考手册 W3CSchool，w3c标准html5手册，XHTML参考手册，XMLHttp中文参考手册；83类实用网页模版，其中HTML5+CSS3网页模版32类，DIV+CSS3网页模版51类。

“网络开发视频大讲堂”系列作为清华社“视频大讲堂”大系的子系列之一，执着于专业，精细于品质：集基础知识、中小实例、实战案例、专业经验于一体，好学、好用、高效。

书籍目录

第1章  CSS样式设计基础
1

视频讲解：2小时38分钟

1.1  设计良好的网页结构
2

1.1.1  选用符合语义的标签
2

1.1.2  文档类型和浏览器模式
7

1.2  初识CSS
8

1.2.1  为什么学习CSS
9

1.2.2  CSS基本语法
9

1.2.3  设计第一个实例
10

1.3  CSS选择器
12

1.3.1  CSS选择器概述
12

1.3.2  标签选择器
13

1.3.3  ID选择器
14

1.3.4  类选择器
16

1.3.5  伪类和伪对象选择器
17

1.3.6  子选择器
19

1.3.7  相邻选择器
20

1.3.8  属性选择器
21

1.3.9  通用选择器
23

1.3.10  包含选择器
23

1.3.11  分组选择器
25

1.3.12  指定选择器
26

1.4  CSS基本特性
26

1.4.1  层叠和特殊性
26

1.4.2  继承
31

1.5  样式表规划、组织和维护
32

1.5.1  对文档应用样式
32

1.5.2  对代码进行注释
34

1.5.3  样式文档
37

1.5.4  组织样式表以便简化维护
37

1.6  CSS属性和属性值
38

1.6.1  CSS属性
38

1.6.2  CSS单位
44

1.6.3  设置颜色
46

第2章  使用CSS设置字体和文本样式
48

视频讲解：2小时12分钟

2.1  字体和文本样式基础
49

2.1.1  定义字体类型
49

2.1.2  定义字体大小
51

2.1.3  定义字体颜色
53

2.1.4  定义字体粗细
54

2.1.5  定义斜体字体
55

2.1.6  定义下划线、删除线和顶划线
56

2.1.7  定义字体大小写
57

2.1.8  定义文本对齐
58

2.1.9  定义垂直对齐
60

2.1.10  定义字间距和行间距
63

2.1.11  定义行间距
64

2.1.12  定义缩进
67

2.2  案例实战
68

2.2.1  设计百度Logo
69

2.2.2  设置标题样式
70

2.2.3  设置正文样式
73

2.2.4  设置文本样式
75

2.2.5  设置文本段样式
79

2.2.6  设置段落版式样式
82

2.2.7  设计单页图文混排版式
86

第3章  使用CSS设置图片样式
92

视频讲解：1小时32分钟

3.1  图片样式设置基础
93

3.1.1  定义图片边框
93

3.1.2  定义图片大小
97

3.1.3  定义图片的横向对齐
98

3.1.4  定义图片的纵向对齐
99

3.1.5  设置文字环绕效果
101

3.2  案例实战
103

3.2.1  图文混排
103

3.2.2  图片布局
107

3.2.3  多图排列
111

3.2.4  阴影图片
114

3.2.5  圆角图片
116

3.2.6  设计圆角栏目
118

第4章  使用CSS控制背景图像
124

视频讲解：1小时38分钟

4.1  背景样式设置基础
125

4.1.1  设置页面背景颜色
125

4.1.2  设置背景颜色给页面分块
126

4.1.3  定义背景图片
128

4.1.4  背景图片的重复
130

4.1.5  定义背景图片的位置
131

4.1.6  固定背景图片
133

4.2  案例实战
134

4.2.1  设置网页背景颜色
135

4.2.2  设置带花纹边框
136

4.2.3  设置永远固定的背景
143

4.2.4  设置圆润的栏目模块
144

4.2.5  设计分栏版式
149

4.2.6  设计滑动门菜单
151

4.2.7  设计灯箱广告
154

4.2.8  设计博客首页效果
157

第5章  使用CSS控制列表样式
163

视频讲解：55分钟

5.1  列表样式设置基础
164

5.1.1  设置列表项符号
164

5.1.2  定义项目的图片符号
166

5.1.3  列表的横竖转换
167

5.2  案例实战
169

5.2.1  设计新闻栏目
169

5.2.2  设计导航菜单
173

5.2.3  设计多级菜单
177

5.2.4  列表排版的应用
182

5.2.5  使用列表实现图文混排效果
186

第6章  使用CSS设计表格样式
192

视频讲解：45分钟

6.1  表格样式设置基础
193

6.1.1  设置表格颜色
193

6.1.2  设置表格边框
194

6.2  案例实战
196

6.2.1  美化表格
197

6.2.2  设计高效的表格
200

6.2.3  让表格更易用
204

6.2.4  表格布局
207

第7章  使用CSS设计表单样式
211

视频讲解：1小时45分钟

7.1  表单样式设置基础
212

7.1.1  表单基本结构
212

7.1.2  设置基本样式
216

7.1.3  定义字体样式
221

7.1.4  定义边框样式
222

7.1.5  定义背景样式
224

7.2  案例实战
228

7.2.1  设计多彩下拉菜单样式
228

7.2.2  设计注册表单
230

7.2.3  设计调查表
235

7.2.4  设计反馈表
240

第8章  使用CSS定义链接样式
246

视频讲解：1小时12分钟

8.1  链接样式设置基础
247

8.1.1  设置链接样式
247

8.1.2  设计下划线样式
248

8.1.3  设置类型指示样式
249

8.1.4  定义按钮样式
251

8.1.5  定义已访问样式
254

8.1.6  链接提示样式
254

8.2  案例实战
256

8.2.1  鼠标样式
256

8.2.2  设计菜单样式
259

8.2.3  设计苹果导航菜单
261

8.2.4  块状选项卡
266

8.2.5  图片浏览
271

第9章  网页排版和DIV+CSS布局
275

视频讲解：2小时47分钟

9.1  CSS盒模型
276

9.1.1  认识盒模型
276

9.1.2  外边距
278

9.1.3  内边距
281

9.1.4  边框
284

9.1.5  宽和高
284

9.2  网页重构
287

9.2.1  设置文档类型
287

9.2.2  选择标签
293

9.2.3  案例实战：尝试重构禅意花园
296

9.3  网页排版
299

9.3.1  网页排版基本原则
299

9.3.2  标准网页版式基本形式
300

9.3.3  网页排版基本方法
300

9.4  DIV+CSS布局
305

9.4.1  布局空间
305

9.4.2  布局位置
307

9.4.3  布局环绕
309

9.4.4  清除浮动
311

9.4.5  布局嵌套
313

9.4.6  调整布局间距
316

9.5  案例实战
321

9.5.1  两列布局
322

9.5.2  三列布局
327

第10章  用CSS定位控制网页布局
332

视频讲解：1小时53分钟

10.1  CSS定位
333

10.1.1  认识position
333

10.1.2  静态定位
333

10.1.3  绝对定位
334

10.1.4  相对定位
335

10.1.5  固定定位
338

10.2  定位参照
339

10.2.1  参照对象
339

10.2.2  坐标值
343

10.2.3  定位的特殊性
344

10.3  定位层叠
347

10.3.1  层叠顺序
347

10.3.2  嵌套层叠顺序
349

10.3.3  CSS层叠框
351

10.3.4  CSS层叠常见问题
354

10.4  案例实战
357

10.4.1  画册式网页布局
357

10.4.2  展览式网页布局
361

10.4.3  浪漫式网页布局
366

第11章  解决CSS设计中的常见问题
372

视频讲解：2小时

11.1  IE条件语句
373

11.1.1  认识IE条件语句
373

11.1.2  IE条件语句基本用法
374

11.1.3  案例实战：设计兼容的多级菜单
376

11.2  CSS渲染及问题
380

11.2.1  开启和关闭IE布局特性
381

11.2.2  设置Layout特性的方法
381

11.2.3  问题1：不能自动展开包含框
384

11.2.4  问题2：包含浮动布局的问题与处理
387

11.2.5  问题3：相邻浮动布局的问题与处理
389

11.2.6  问题4：列表布局的问题与处理
390

11.2.7  问题5：定位布局的问题与处理
392

11.3  常用浏览器解析问题和解决方法
394

11.3.1  兼容IE6版本浏览器
395

11.3.2  兼容IE5系列版本浏览器
396

11.3.3  兼容IE7版本浏览器
398

11.3.4  兼容FF等标准浏览器
399

11.3.5  问题1：超链接的Bug
399

11.3.6  问题2：内容与背景分离的Bug
400

11.3.7  问题3：IE6躲躲猫Bug
402

11.3.8  问题4：IE6多余字符Bug
403

11.4  案例实战
403

11.4.1  3列等高布局
403

11.4.2  3列浮动布局
408

第12章  旅游酒店网站
410

视频讲解：2小时18分钟

12.1  网站页面效果分析
411

12.1.1  “旅游度假”页面效果分析
411

12.1.2  “预定酒店”页面效果分析
411

12.2  首页策划设计
412

12.3  网页设计与重构
414

12.3.1  画草图和设计图
414

12.3.2  切图
417

12.3.3  主体重构
419

12.4  页面布局
422

12.4.1  设计页面基本样式
422

12.4.2  设计页头布局和样式
422

12.4.3  设计搜索和幻灯区布局和样式
425

12.4.4  设计左侧引导区布局和样式
427

12.4.5  设计内容区样式
428

12.4.6  设计右侧专题栏样式
431

第13章  新闻网站
434

视频讲解：1小时20分钟

13.1  网站页面效果分析
435

13.1.1  “对话”页面效果分析
435

13.1.2  环球看点页面效果分析
435

13.2  首页策划设计
436

13.3  网页设计与重构
438

13.3.1  画草图和设计图
438

13.3.2  切图
440

13.3.3  主体重构
442

13.4  页面布局
444

13.4.1  设计页面基本样式
445

13.4.2  设计页头布局和样式
445

13.4.3  设计主要新闻区布局和样式
447

13.4.4  设计分类新闻区布局和样式
450

第14章  使用JavaScript控制CSS样式
455

视频讲解：2小时47分钟

14.1  JavaScript基础
456

14.1.1  在网页中嵌入JavaScript脚本
456

14.1.2  JavaScript脚本在文档中的位置
457

14.1.3  解决JavaScript脚本与CSS样式冲突
457

14.2  CSS脚本化传统控制方法
459

14.2.1  认识Style对象
460

14.2.2  读写行内样式
464

14.2.3  读写样式表中样式
467

14.2.4  访问网页实际样式
472

14.3  控制CSS脚本的标准方法
473

14.3.1  CSSStyleSheet接口
474

14.3.2  CSSStyleRule接口
474

14.3.3  CSSStyleDeclaration接口
475

14.4  使用JavaScript控制元素大小
476

14.4.1  读取元素的长宽样式值
476

14.4.2  使用offsetWidth和offsetHeight属性读取元素的尺寸
479

14.4.3  读取复杂结构中的元素尺寸
481

14.4.4  读取浏览器窗口大小
485

14.5  使用JavaScript定位
486

14.5.1  在窗口中的位置
487

14.5.2  相对父元素的位置
489

14.5.3  相对包含块的位置
489

14.5.4  定义偏移位置
490

14.5.5  定义相对位置
490

14.5.6  确定光标位置
491

14.5.7  确定光标的相对位置
492

14.5.8  确定滚动条的位置
493

14.5.9  定义滚动条的位置
493

14.6  使用JavaScript设置显隐效果
494

14.6.1  设置显隐效果
494

14.6.2  设置透明度
495

14.6.3  控制动画时长
496

14.6.4  设计滑动效果
499

第15章  使用CSS设计XML文档样式
502

视频讲解：43分钟

15.1  XML基础
503

15.1.1  XML文档基本结构
503

15.1.2  声明
504

15.1.3  处理指令
504

15.1.4  注释
505

15.1.5  标签
505

15.1.6  属性
506

15.2  设置XML文档样式
507

15.2.1  CSS样式表
507

15.2.2  XSL样式表
508

15.3  CSS与XML文档关联
510

15.3.1  直接嵌入CSS样式
510

15.3.2  导入外部CSS样式表文件
512

15.3.3  @ import
513

15.4  案例实战
513

15.4.1  设计诗情画意图文效果
513

15.4.2  设计新闻版面效果
515

第16章  使用CSS滤镜
519

视频讲解：43小时分钟

16.1  CSS滤镜概述
520

16.1.1  基本用法
520

16.1.2  恰当选用滤镜
520

16.2  常用CSS滤镜
521

16.2.1  通道（Alpha）
521

16.2.2  模糊（Blur）
523

16.2.3  运动模糊（MotionBlur）
524

16.2.4  透明色（Chroma）
525

16.2.5  翻转（Flip）
527

16.2.6  光晕（Glow）
528

16.2.7  灰度（Gray）
529

16.2.8  反色（Invert）
530

16.2.9  遮罩（Mask）
531

16.2.10  阴影（Shadow）
532

16.2.11  X射线（Xray）
534

16.2.12  浮雕（Emboss）
535

16.2.13  波浪（Wave）
536

16.3  案例实战
537

编辑推荐

《CSS+DIV网页样式与布局从入门到精通》编辑推荐：“网络开发视频大讲堂”丛书系清华社“视频大讲堂”重点大系之一。该大系包括多个子系列，每个子系列的图书在其同品种的图书中销售名列前茅，其中：4个品种荣获“全行业优秀畅销品种”；1个品种荣获2012年清华大学出版社“专业畅销书”一等奖；绝大多数品种在“全国计算机零售图书排行榜”同品种排行中名列前茅，截至目前该大系累计销售超过55万册。该大系已成为近年来清华社计算机专业基础类零售图书最畅销的品牌之一。“网络开发视频大讲堂”系列作为清华社“视频大讲堂”大系的子系列之一，继承和创新了清华社“视频大讲堂”大系的编写模式、写作风格和优良品质。突出了以下内容：216节大型高清同步视频演示讲解，可反复观摩，让学习更为快捷、高效；218个中小典型实例，通过实例学习更深入，更有趣，更有动力；51个综合实战案例，展现工作过程，积累工作经验；11部网页开发参考手册，CSS2.0参考手册，CSS3.0参考手册，JavaScript参考手册，JavaScript核心参考，jQuery1.7中文手册，jQuery1.3参考手册，jQuery1.4参考手册 W3CSchool，w3c标准html5手册，XHTML参考手册，XMLHttp中文参考手册；83类实用网页模版，其中HTML5+CSS3网页模版32类，DIV+CSS3网页模版51类。“网络开发视频大讲堂”系列作为清华社“视频大讲堂”大系的子系列之一，执着于专业，精细于品质：集基础知识、中小实例、实战案例、专业经验于一体，好学、好用、高效。

前言

前言随着Web 2.0的大潮席卷而来，网页标准化CSS+DIV的设计方式正逐渐取代传统的表格布局模式，学习CSS也成为设计人员的必修课。Web标准提出将网页的内容与表现分离，同时要求HTML文档具有良好的结构，因此需要抛弃传统的表格布局方式，采用DIV布局，并且使用CSS来实现页面的外观设计。本书作者自2000年开始从事网页设计及制作工作，先后在多家网络公司任职，积累了大量网页设计制作方面的经验，精通网页布局和美化的多种技巧。本书基于Dreamweaver CS5、Photoshop CS5等常用软件，按照从入门到精通的写作思路，结合了由简单到复杂的多个典型网站实例，使读者不但可以学会使用多种网页制作工具制作出精美的网页，还能掌握目前流行的CSS+DIV网页布局与美化技能。本书系统地讲解了CSS层叠样式表的基础理论和实际运用技术，通过大量实例对CSS进行深入浅出的分析。着重讲解如何用CSS+DIV进行网页布局，注重实际操作，使读者在学习CSS应用技术的同时掌握CSS+DIV的精髓。本书还详细讲解了其他书中较少涉及的技术细节，并给出了两个常见类型的完整网页的综合实例，让读者进一步巩固所学知识，提高综合应用能力。授人以鱼不如授人以渔，对于CSS样式的学习也是如此，直接给代码还不如去看他人网站的源代码，只有掌握了CSS样式的本质，了解CSS样式是如何实现页面布局，如何完成页面中一些比较好玩、比较实用的效果后才能得心应手地使用CSS样式。本书特色系统的基础知识本书系统地讲解了CSS层叠样式表技术在网页设计中各个方面应用的知识，从为什么要用CSS开始讲解，循序渐进，配合大量实例，帮助读者奠定坚实的理论基础，做到知其所以然。大量的案例实战书中设置大量应用实例，重点强调具体技术的灵活应用，并且全书结合了作者长期的网页设计制作和教学经验，使读者真正做到学以致用。深入解剖CSS+DIV布局本书用相当的篇幅重点介绍了用CSS+DIV进行网页布局的方法和技巧，配合经典的布局案例，帮助读者掌握CSS最核心的应用技术。高级混合应用技术真正的网页除了外观表现之外，还需要结构标准语言和行为标准的结合，因此本书还特别讲解了CSS与JavaScript、Ajax和XML的混合应用（这些都是Web 2.0网站中的主要技术），使读者掌握高级的网页制作技术。精选综合实例本书精选了两个常见类型的网页综合实例，包括新闻网站和旅游酒店网站，帮助读者总结前面所学知识，综合应用各种技术、方法和技巧，提高读者综合应用的能力。本书内容全书分为3部分，共16章，具体结构划分如下。第1部分：CSS基础知识，包括第1～11章。这部分主要介绍了CSS相关基础知识，包括CSS语言基础、字体和文本样式、图片样式、背景图像样式、列表样式、表格样式、表单样式、超链接样式、CSS+DIV网页排版、CSS定位与网页布局、CSS常见问题与解决。第2部分：典型实例，包括第12～13章。这部分主要通过对两个各具特色的网站制作过程的讲解，由浅入深地介绍了如何将层布局与层叠样式表相结合来完成不同的网页效果。即使是初学者也可以轻松掌握CSS+DIV布局方式，制作出精美的网页并搭建功能强大的网站。第3部分：扩展应用，包括第14～16章。这部分主要介绍了使用JavaScript控制 CSS样式、使用CSS设计XML文档样式和使用CSS滤镜。这些知识在网页设计实践中会经常用到，因此读者应该学习和掌握它们，并能够综合应用各种技术，解决复杂的网页设计问题。本书读者希望系统学习网页设计、网站制作的初学者从事网页设计制作和网站建设的专业人士既适合初学者，也适合进阶者可以作为各大中专院校相关专业的教学辅导和参考用书，或作为相关培训机构的培训教材本书约定为了给读者提供更多的学习资源，本书提供了很多参考链接，许多书中无法详细介绍的问题都可以通过这些链接找到答案。因为链接地址会因时间而有所变动或调整，所以在此说明，这些链接地址仅供参考，本书无法保证所有地址是长期有效的。本书中的图例可能会与读者实际环境中的操作界面有所差别，这可能是由于操作系统平台、浏览器版本等不同而引起的，在此特别说明，读者应该以实际情况为准。本书实例设计图都是在Photoshop CS5中设计制作的，在学习本书实例之前需要安装Photoshop CS5，如果要查看本书中的源代码，建议使用Dreamweaver CS5。关于我们参与本书编写的人员包括喻浩、咸建勋、奚晶、文菁、李静、钟世礼、李增辉、甘桂萍、刘燕、杨凡、李爱芝、余乐、孙宝良、余洪萍、谭贞军、孙爱荣、何子夜、赵美青、牛金鑫、孙玉静、左超红、蒋学军、邓才兵、袁江、李东博等。由于作者水平有限，书中疏漏和不足之处在所难免，欢迎读者朋友不吝赐教。广大读者如有好的建议、意见，或在学习本书时遇到疑难问题，可以联系我们，我们会尽快为您解答。编者

内容概要

喻浩，资深Web架构师，长期专注于Web前沿技术，深蕴.NET技术框架，对于CSS、JavaScript、XHTML、XML、Ajax等Web前台技术有着深厚的基础，并在实践中提出很多独到见解，深受业界同仁和客户的好评。国内知名IT图书作者，荣获2008年度IT图书最佳原创作者奖。作者发表过Web评论文章十几篇，出版过多本Web技术专著。长期笔耕不辍，所写图书技术严谨、扎实，语言通俗易懂。其中《CSS商业网站布局之道》等图书深受读者欢迎和喜爱，市场反映良好。

---

 CSS+DIV网页样式与布局从入门到精通下载

---