DIV+CSS 3网页样式与布局全程揭秘（第2版）

《网页设计殿堂之路》丛书是由来自一线的专业网页设计人员集多年的技术与经验倾力打造的一套体系完整、技术前沿、设计精美的网页设计系列丛书。

l 完整的体系：针对网页设计师的职业需求量身定做，市面上知识体系完整的一套网页设计丛书。

l 前沿的技术：紧跟网页技术发展的*潮流，市面上技术*的一套网页设计丛书。

l 精美的设计：来自实践的精美案例和专业的装帧设计，市面上精美的一套网页设计丛书。

作为励志成为网页设计精英的你，需要掌握哪些知识呢？下表给出了你明确的答案。

针对这样的知识架构，我们精心创作了该系列丛书，共十个品种。

PHP+MySQL+Dreamweaver网站建设全程揭秘
DIV+CSS 3网页样式与布局全程揭秘（第2版）
Flash绘图与网页动画制作全程揭秘
网站用户体验设计全程揭秘
HTML 5+CSS 3+JavaScript网页布局与特效全程揭秘
Photoshop网页风格与配色设计全程揭秘
HTML 5网页制作全程揭秘
Photoshop网站UI设计全程揭秘
Photoshop+Dreamweaver+Flash网站设计与制作全程揭秘
Dreamweaver网页设计全程揭秘

该套丛书具有以下独一无二的特点：

l 内容全面，紧贴实际：帮助你解决网页设计中遇到的所有问题，帮助你搞定每一个网页设计项目。

l 关注细节，量身打造：技术细节、设计细节，这些在工作中看似细微，但是往往决定成败的关键点，全部为你一一道来。

l 海量资源，现场教学：提供了大量的来自于一线项目的案例资源，并通过视频讲解为你一一呈现。

 

本书是一本介绍DIV+CSS网站建设的经典之作，系统地介绍了CSS样式的基础理论和实际应用技术，并结合实例来讲解使用DIV+CSS布局制作网页的方法和技巧。在介绍使用CSS样式进行设计的同时，还结合实际网页制作中可能遇到的问题，提供了解决问题的思路、方法和技巧，使初学者能够全面、快速地掌握DIV+CSS布局制作网页的方法。

本书通过知识点与实例相结合的方式，让读者能够清晰明了地理解DIV+CSS布局制作网页的相关技术内容，从而达到学以致用的目的。全书共分14章，从初学者的角度出发，全面讲解了DIV+CSS布局制作网页的相关知识，其中包括网页和网站的相关开发知识、CSS样式入门、使用CSS设置文本和段落样式、使用CSS设置背景和图片样式、使用CSS设置列表样式、使用CSS设置超链接样式、使用CSS设置表单元素样式、使用DIV+CSS布局网页和商业案例实战等内容。

本书附赠1张DVD光盘，其中包含书中所有实例的源文件和终文件，以及所有实例的教学视频，以方便读者学习和参考。

本书结构清晰、实例经典、技术实用，适合初中级网页设计爱好者，以及希望学习Web标准和对原有网站进行重构的网页设计者，同时也可作为高等院校相关专业的参考用书。

　第1章　网页和网站开发知识 1

1.1　了解网页 1

1.1.1　网页与网站的关系 1

1.1.2　网页的基本构成元素 2

1.2　如何设计网页 3

1.2.1　什么是网页设计 3

1.2.2　网页设计的特点　 3

1.2.3　网页设计相关术语 4

1.2.4　常见网站类型 7

1.3　关于表格布局 8

1.3.1　表格布局的特点 9

1.3.2　冗余的嵌套表格和混乱的结构 9

1.4　关于DIV+CSS布局 10

1.4.1　DIV+CSS布局的特点 10

1.4.2　DIV+CSS布局的优势 10

1.5　Web标准 11

1.5.1　什么是Web标准 11

1.5.2　Web标准的内容 11

1.5.3　结构、表现、行为和内容 12

1.5.4　遵循Web标准的好处 13

1.6　网站开发流程 13

1.6.1　网站策划 13

1.6.2　规划网站结构 14

1.6.3　素材收集整理 14

1.6.4　网页版式与布局分析 14

1.6.5　确定网站主色调 15

1.6.6　设计网站页面 15

1.6.7　切割和优化网页 16

1.6.8　制作HTML页面 16

1.6.9　使用CSS样式控制网页外观 16

1.6.10　为网页应用JavaScript特效 17

1.6.11　网站后台程序开发 17

1.6.12　申请域名和服务器空间 17

1.6.13　测试并上传网站 17

1.7　本章小结 17

　第2章　HTML、XHTML和

HTML5 18

2.1　HTML与XHTML
18

2.1.1　HTML与XHTML的区别 18

2.1.2　使用XHTML的优点 18

2.2　HTML基础 19

2.2.1　了解HTML 19

2.2.2　HTML的作用 20

2.2.3　HTML的基础结构 20

2.2.4　HTML的基本语法 21

2.3　HTML常用标签 21

2.3.1　区块标签 22

2.3.2　文本标签 22

2.3.3　格式标签 23

2.3.4　图像标签 23

2.3.5　表格标签 24

2.3.6　超链接标签 24

2.4　XHTML基础 25

2.4.1　了解XHTML 25

2.4.2　XHTML文档的基本结构 25

2.4.3　3种不同的XHTML文档类型 26

2.4.4　严谨的代码 27

2.4.5　制作HTML页面 29

实例01+视频：制作简单的HTML页面 29

2.5　HTML
5基础 30

2.5.1　了解HTML
5 30

2.5.2　HTML
5的简化操作 31

2.5.3　HTML
5新增标签 31

2.5.4　HTML
5废弃标签 33

2.5.5　HTML
5新增选择器 33

2.5.6　HTML
5的优势 34

2.6　HTML
5的应用 35

2.6.1　标签 35

实例02+视频：在网页中实现绘图效果 35

2.6.2　标签 37

实例03+视频：在网页中嵌入音频 37

2.6.3　标签 38

实例04+视频：在网页中嵌入视频 39

2.7　本章小结 40

　第3章
CSS样式入门 41

3.1　初识CSS样式 41

3.1.1　为什么要使用CSS样式 41

3.1.2　在网页中使用CSS样式的优势 42

3.1.3　CSS样式的作用 43

3.1.4　CSS样式的局限性 44

3.1.5　CSS样式基础语法 44

3.1.6　认识CSS规则的构成 45

3.2　CSS选择符 46

3.2.1　通配选择符 46

实例05+视频：航天科技网页 46

3.2.2　标签选择符 48

实例06+视频：酒店网站页面 48

3.2.3　ID选择符 50

实例07+视频：制作科技网站页面 50

3.2.4　类选择符 51

实例08+视频：设置活动网站页面文字 52

3.2.5　伪类和伪对象选择符 53

实例09+视频：设置酒店网站文字链接

效果 54

3.2.6　群选择符 55

实例10+视频：设置女装网站图片效果 55

3.2.7　派生选择符 57

实例11+视频：运动鞋网站页面 57

3.3　CSS
3中新增的选择符 58

3.3.1　属性选择符 58

3.3.2　结构伪类选择符 59

3.3.3　UI元素状态伪类选择符 60

3.4　在网页中应用CSS样式的4种方法 60

3.4.1　内联CSS样式 60

实例12+视频：使用style属性添加

内联CSS样式 61

3.4.2　内部CSS样式 62

实例13+视频：使用标签添加

内部CSS样式 62

3.4.3　链接外部CSS样式文件 63

实例14+视频：使用标签链接

外部CSS样式文件 64

3.4.4　导入外部CSS样式文件 66

实例15+视频：使用@import命令导入

外部CSS样式文件 66

3.5　CSS样式的特性 67

3.5.1　继承性 67

3.5.2　特殊性 68

3.5.3　层叠性 68

3.5.4　重要性 69

3.6　CSS样式中的颜色设置和单位 69

3.6.1　CSS中的多种颜色设置方法 69

3.6.2　CSS中的单位 71

DIV+CSS是一种全新的网页排版布局方法，与早期的表格布局方式是完全不一样的，使用DIV+CSS排版布局网页能够真正做到Web标准所要求的网页内容与表现相分离，从而使网站的维护更加方便和快捷。目前绝大多数的网站已经开始使用DIV+CSS布局制作，因此学习DIV+CSS布局制作网站已经成为网页设计制作人员的必修课。

本书力求通过简单易懂、边学边练的方式与读者一起探讨使用Web标准进行网页设计制作的各方面知识，逐步使读者理解什么是网页内容与表现的分离，掌握使用DIV+CSS布局制作网站页面的方法。希望通过本书使读者快速、全面地掌握使用DIV+CSS布局制作网页的方法和技巧。

本书内容

本书全面讲解了使用DIV+CSS进行网页布局制作的方法和技巧，其详细的讲解步骤配合图标，使得讲解内容清晰易懂、一目了然。书中不仅应用了大量的实例对知识点进行深入的剖析和讲解，还结合作者多年的网页设计经验和教学经验进行点拨，使读者能够学以致用。另外，书中还对CSS
3、HTML 5和常见的网页特效进行了讲解，力求使读者全面掌握网页设计和制作的相关知识。本书共分为14章，各章内容介绍如下。

第1章　网页和网站开发相关知识，主要介绍网页与网站的基础知识，包括网页与网站的关系、网页的基本构成元素和网页设计的术语等内容，并且对表格布局和DIV+CSS布局的优缺点进行了介绍，使读者对DIV+CSS网站建设有更深入的了解。

第2章　HTML、XHTML和HTML
5，重点介绍HTML与XHTML的相关基础知识，了解HTML与XHTML的区别，还介绍了有关HTML 5的知识，使读者对的HTML 5有所了解。

第3章　CSS样式入门，主要介绍有关CSS样式的基础知识，包括CSS样式的优势和作用、CSS样式语法、CSS选择符、CSS
3新增的选择符和应用CSS样式的4种方式等内容，使读者对CSS样式有全面的认识和理解。

第4章　使用CSS设置文本和段落样式，介绍了CSS样式在文本和段落样式设置方面的相关属性，以及CSS类选区和在网页中应用特殊字体的方法，并通过实例练习的方法使读者更容易理解和应用。

第5章　使用CSS设置背景和图片样式，介绍了使用CSS样式对背景颜色、背景图像和图片样式进行设置的属性和方法，并且介绍了使用CSS样式实现图文混排的方法和背景图片在网页中的特殊应用。

第6章　使用CSS设置列表样式，介绍了网页中列表的相关标签和知识，并通过实例的方式讲解了使用CSS样式对有序列表、无序列表和定义列表进行设置的方法，还介绍了如何使用CSS样式对列表进行设置，从而制作出横向和竖向的导航菜单效果。

第7章　使用CSS设置超链接样式，主要介绍网页超链接的相关知识以及CSS超链接伪类，并通过实例的方式讲解了网页中多种超链接效果的CSS样式设置方法，还介绍了如何通过CSS样式对网页光标指针进行设置和超链接在网页中的特殊应用。

第8章　使用CSS设置表格样式，介绍了表格模型和相关标签，重点讲解了如何使用CSS样式对网页中的表格进行设置，从而使网页中的表格更加美观。

第9章　使用CSS设置表单元素样式，介绍了常用的表单元素和标签，重点讲解了使用CSS样式对表单进行设置，还通过实例的方式讲解了表单在网页中的特殊应用效果。

第10章　CSS滤镜的应用，介绍了CSS滤镜的基础知识和CSS滤镜语法，并且通过实例与知识点相结合分别介绍了各种CSS滤镜的使用方法和技巧。

第11章　CSS高级应用与CSS 3属性，介绍了CSS样式的高级应用，包括CSS样式的简写和CSS样式优化。还重点介绍了CSS
3的新增属性，并且通过实例的形式展示了CSS 3新增属性的强大功能和效果。

第12章　使用DIV+CSS布局网页，DIV+CSS布局是目前流行的网页布局方式，本章主要介绍DIV+CSS布局的相关知识，包括CSS盒模型、常用的CSS定位方式和CSS布局方式等内容，使读者能够掌握DIV+CSS布局的方法。

第13章　CSS与JavaScript实现网页特效，介绍了JavaScript的基础知识和基本语法，讲解了如何使用Dreamweaver中的Spry来实现常见的网页特效，以及使用JavaScript与CSS样式相结合实现网页特效的方法。

第14章　商业案例实例，本章通过3个不同类型的商业案例的设计和制作，向读者全面介绍使用DIV+CSS布局制作网页的方法和技巧。

本书特点

本书形式新颖、内容丰富、结构清晰，从实际应用的角度出发，全面而系统地介绍了使用DIV+CSS布局制作网页的各方面知识，将知识点与实际应用案例相结合，真正做到学以致用，使读者能够全面掌握DIV+CSS网页布局制作技术。

本书主要有以下特点：

知识全面，系统。本书内容完全从网页创建的实际角度出发，将CSS样式的应用进行归类，每个CSS属性的语法、属性和参数都有完整而详细的说明，信息量大，知识结构完善。

本书的编排采用循序渐进的方式 ，适合初学者逐步掌握复杂的DIV+CSS网页布局制作。

典型实例讲解。每章都配有大量的实例练习，将基础知识综合贯穿起来，力求达到理论知识与实际操作完美结合的效果。

本书由具有丰富工作经验的设计师编写，并且在每个实例后都配有相关的提问和解答，旨在引导读者能够快速掌握DIV+CSS网页布局制作。

本书作者

本书由畅利红编著，另外李晓斌、张晓景、解晓丽、孙慧、程雪翩、王媛媛、胡丹丹、刘明秀、陈燕、王素梅、杨越、王巍、王状、赵为娟、邢燕玲、聂亚静等人也参与了编写工作。本书在写作过程中力求严谨，由于水平有限，疏漏之处在所难免，望广大读者批评指正。

编 者