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

目　录

第1章　CSS入门

本章从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。

1．1　CSS的概念　002

1．1．1　网页中标记的概念　002

1．1．2　HTML与CSS的互补　002

1．1．3　浏览器对CSS的支持　003

1．2　网页设计中的CSS　003

1．2．1　CSS能做什么　003

1．2．2　CSS的局限性　003

1．3　网站CSS赏析　004

1．3．1　商务网站CSS样式赏析　004

1．3．2　游戏网站CSS样式赏析　004

1．4　实例——编写我的第一个CSS样式　005

1．4．1　从零开始　005

1．4．2　加入CSS控制　006

1．4．3　控制图片　006

1．4．4　CSS的注释　007

高手私房菜　007

第2章　CSS 3基本语法

本章重点介绍CSS如何控制页面中的各个标记。先从控制HTML标记的不同方法入手，介绍各种选择器的概念和声明方法，以及CSS的有关属性值。

2．1　构造CSS规则　010

2．2　实例1——基本CSS选择器　010

2．2．1　标记选择器　011

2．2．2　类别选择器　012

2．2．3　ID选择器　015

2．3　实例2——在HTML中使用CSS　016

2．3．1　行内样式　016

2．3．2　内嵌式　017

2．3．3　链接式　018

2．3．4　导入式　019

2．3．5　各种方式的优先级　020

2．4　CSS 3的声明　020

2．4．1　标准声明　020

2．4．2　合并多重声明　020

2．5　属性值　021

2．5．1　整数和实数　021

2．5．2　长度值　022

2．5．3　百分比值　022

2．5．4　URL　022

2．5．5　颜色值　023

2．6　CSS的继承　023

高手私房菜　024

第3章　手工与借助工具编写网页样式

本章分别通过使用手工与借助工具设置标题、控制图片、设置整体页面等内容，来讲述如何完成一个使用CSS技术的网页。

3．1　实例1——手工编写　026

3．1．1　从零开始　026

3．1．2　设置标题　028

3．1．3　控制图片　028

3．1．4　设置正文　029

3．1．5　设置整体页面　030

3．1．6　对段落进行分别设置　030

3．1．7　完整代码　031

3．2　实例2——使用Dreamweaver编写　032

3．2．1　使用Dreamweaver创建页面　032

3．2．2　在Dreamweaver中新建CSS规则　034

3．2．3　在Dreamweaver中编辑CSS规则　038

3．2．4　为图像创建CSS规则　038

高手私房菜　040

第4章　盒子模型

盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中的每一个元素的用法，才能真正控制页面中各个元素的位置。

4．1　盒子的内部结构　042

4．2　实例1——边框　042

4．2．1　边框类型　042

4．2．2　属性值的简写形式　044

4．2．3　边框与背景　044

4．3　实例2——内边距　045

4．4　实例3——外边距　046

4．5　实例4——盒子之间的关系　047

4．5．1　HTML与DOM　047

4．5．2　标准文档流　049

4．5．3　div标记与span标记　049

4．6　实例5——盒子在标准流中的定位原则　050

4．6．1　行元素之间的水平margin　050

4．6．2　块元素之间的竖直margin　051

4．6．3　嵌套盒子之间的margin　052

4．6．4　将margin设为负值　052

4．7　实例6——盒子的浮动　053

4．7．1　准备代码　053

4．7．2　设置浮动的div　054

4．7．3　改变浮动的方向　055

4．7．4　全部向右浮动　056

4．7．5　使用clear属性清除浮动的影响　056

4．8　实例7——盒子的定位　057

4．8．1　静态定位　058

4．8．2　相对定位　058

4．8．3　绝对定位　059

4．8．4　固定定位　060

高手私房菜　060

第5章　CSS 3的高级特性

本章主要介绍CSS的复合选择器、继承性及层叠性等高级特性，学习这些高级特性，在提高页面制作效率上会有很大帮助。

5．1　实例1——复合选择器　062

5．1．1　交集选择器　062

5．1．2　并集选择器　062

5．1．3　后代选择器　063

5．2　实例2——CSS的继承特性　064

5．2．1　继承关系　065

5．2．2　CSS继承的运用　065

5．3　实例3——CSS的层叠特性　066

高手私房菜　068

第6章　网页字体与对象尺寸

文字是网页设计永远不可缺少的元素，文字尺寸的设置关系着网页是否美观。本章从基础文字设置出发，详细讲解CSS设置各种文字效果的方法。

6．1　实例1——指定字体属性　070

6．1．1　font-weight属性　070

6．1．2　font-variant属性　071

6．1．3　font-style属性　072

6．1．4　font简写属性　072

6．2　实例2——字体族　073

6．2．1　泛型字体族　073

6．2．2　通常安装的字体　074

6．3　实例3——设置字体　074

6．3．1　选择字体集　074

6．3．2　设置字体尺寸　075

6．3．3　设置文字横向拉伸变形　076

6．3．4　设置字体尺寸是否统一　076

6．4　实例4——设置对象尺寸　076

6．4．1　对象宽度设定　077

6．4．2　对象高度设定　077

6．4．3　对象尺寸范围设定　078

6．4．4　文本行高控制　078

6．4．5　垂直对齐方式　079

高手私房菜　080

第7章　网页文本与段落设计

本章主要介绍文字的有关设置和段落排版，如果说第6章是文字的设置基础，那么本章就是文字的设置应用。

7．1　实例1——添加文本　082

7．1．1　普通文本　082

7．1．2　特殊文字符号　082

7．2　实例2——文本排版　083

7．2．1　段落标记p与换行标记br 　084

7．2．2　标题标记h1~h6　084

7．2．3　文本水平居中标记center　085

7．3　实例3——网页特殊字符　085

7．4　实例4——文本的应用　087

高手私房菜　088

第8章　文本样式

本章通过介绍文本的颜色定义、字体设置效果、段落缩进、字词间距等，来综合讲解排版布局中具体如何设置文本的样式。

8．1　长度单位　090

8．2　实例1——颜色定义　090

8．3　实例2——准备页面　091

8．4　实例3——设置文字的字体　092

8．5　实例4——设置文字的倾斜效果　093

8．6　实例5——设置文字的加粗效果　093

8．7　实例6——英文字母大小写转换　093

8．8　实例7——控制文字的大小　094

8．9　实例8——文字的装饰效果　095

8．10　实例9——设置段落首行缩进　095

8．11　实例10——设置字词间距　096

8．12　实例11——设置段落内部的文字行高　096

8．13　实例12——设置段落之间的距离　097

8．14　实例13——控制文本的水平位置　097

8．15　实例14——设置文字与背景的颜色　098

8．16　实例15——设置段落的垂直对齐方式　099

高手私房菜　100

第9章　文本颜色与效果

本章主要是深层次地介绍文本的颜色设置、特殊文本的效果设置以及控制文本间距的操作方法，从而使读者熟练地掌握文本颜色设置和文本效果属性。

9．1　实例1——文本颜色　102

9．1．1　定义颜色值　102

9．1．2　有效使用颜色　103

9．2　实例2——特殊文本效果　104

9．2．1　text-decoration属性　104

9．2．2　text-transform属性　105

9．3　实例3——控制文本间距　107

9．3．1　letter-spacing属性　107

9．3．2　word-spacing属性　108

9．3．3　white-spacing属性　109

9．3．4　line-height属性　111

高手私房菜　112

第10章　背景颜色与图像

任何一个网页，它的背景颜色和图案往往是给用户的第一印象，因此在页面中控制背景和图案是一个网站设计的重要步骤。本章主要讲述CSS控制背景颜色和图像的方法。

10．1　实例1——设置背景颜色　114

10．2　实例2——设置背景图像　115

10．3　实例3——设置背景图像平铺　116

10．4　实例4——设置背景图像位置　117

10．5　实例5——设置背景图片位置固定　119

10．6　实例6——设置标题的图像替换　119

10．7　实例7——使用滑动门技术的标题　120

高手私房菜　122

第11章　图像效果

本章通过讲述设置图片边框、图片缩放、图文混排、图片与文字对齐方式等，综合介绍图像的设置方式。

11．1　实例1——设置图片边框　124

11．1．1　基本属性　124

11．1．2　为不同的边框分别设置样式　125

11．2　实例2——图片缩放　126

11．3　实例3——图文混排　127

11．3．1　文字环绕　127

11．3．2　设置图片与文字的间距　128

11．4　实例4——八大行星科普网页　129

11．5　实例5——设置图片与文字的对齐方式　134

11．5．1　横向对齐方式　134

11．5．2　纵向对齐方式　135

高手私房菜　136

第12章　网页表格

网页表格是网页常见的元素，本章主要围绕表格介绍CSS设置其样式的方法。最后通过实例制作计算机报价表来总结本章的知识点。

12．1　实例1——创建表格　138

12．2　实例2——控制表格　139

12．2．1　表格中的标记　139

12．2．2　表格的边框　141

12．2．3　表格宽度的确定　141

12．2．4　其他与表格相关的标记　142

12．3　实例3——表格操作　144

12．3．1　合并单元格　144

12．3．2　设置对齐方式　145

12．3．3　用cellpadding属性和cellspacing属性设定距离　146

12．4　实例4——鼠标指针经过时整行变色提示的表格　147

12．4．1　搭建HTML结构　147

12．4．2　在Firefox和IE9中实现鼠标指针经过时整行变色　149

12．4．3　在IE6中实现鼠标指针经过时整行变色　149

12．5　实例5——制作计算机报价表　150

高手私房菜　152

第13章　链接与项目列表

网页中除文字、图像、表格等元素外，还有链接和项目列表。网站来源于链接，从本质上来说网站就是链接。

13．1　实例1——丰富的链接特效　154

13．1．1　动态超链接　154

13．1．2　按钮式超链接　155

13．1．3　CSS控制鼠标指针　156

13．1．4　浮雕背景超链接　158

13．1．5　让下画线动起来　159

13．2　实例2——项目列表　160

13．2．1　列表的符号　160

13．2．2　图片符号　161

13．2．3　建立有序列表　162

13．2．4　建立序列表　163

13．2．5　网页列表的应用　164

高手私房菜　166

第14章　导航菜单

一个好的网站，导航菜单是不可缺少的元素之一。导航菜单的基调决定着网站的基调。本章主要介绍各种导航菜单的制作方法。

14．1　实例1——简单的导航菜单　168

14．1．1　竖直导航菜单　168

14．1．2　横竖自由转换菜单　170

14．2　实例2——水平导航菜单　171

14．2．1　自适应的斜角水平菜单　171

14．2．2　应用滑动门技术的玻璃效果菜单　174

14．2．3　会跳起的多彩菜单　176

14．3　实例3——竖直排列的导航菜单　180

14．3．1　双竖线菜单　180

14．3．2　双斜角横线菜单　181

14．3．3　立体菜单　183

14．3．4　箭头菜单　184

14．3．5　带说明信息的菜单　186

14．4　实例4——下拉菜单　187

高手私房菜　190

第15章　固定宽度布局

本章主要介绍CSS排版的观念和具体方法，包括CSS排版的整体思路、两种具体的排版结构。最后以制作魔术布局来总结分析CSS的布局方法。

15．1　CSS排版观念　192

15．1．1　MSN的首页　192

15．1．2　Hao123的首页　193

15．1．3　Yahoo的首页　193

15．2　实例1——单列布局　194

15．2．1　放置第一个圆角框　194

15．2．2　设置圆角框的CSS样式　195

15．2．3　放置其他圆角框　197

15．3　实例2——“1-2-1”固定宽度布局　198

15．3．1　准备工作　199

15．3．2　绝对定位法　200

15．3．3　浮动法　201

15．4　实例3——“1-3-1”固定宽度布局　202

15．5　实例4——魔术布局　205

15．5．1　魔术布局设计　205

15．5．2　制作魔术布局　207

15．5．3　修正缺陷　211

高手私房菜　212

第16章　变宽度布局

本章主要讲述常用变宽度布局的制作，变宽度的布局要比固定宽度的布局复杂一些，根本的原因在于宽度不确定，导致很多参数法确定，必须使用一些技巧来完成。

16．1　实例1——“1-2-1”变宽度网页布局　214

16．1．1 “1-2-1”等比例变宽布局　214

16．1．2 “1-2-1”单列变宽布局　215

16．2　实例2——“1-3-1”变宽度网页布局　216

16．2．1 “1-3-1”三列宽度等比例布局　216

16．2．2 “1-3-1”单侧列宽度固定的变宽布局　216

16．2．3 “1-3-1”中间列宽度固定的变宽布局　220

16．2．4 “1-3-1”双侧列宽度固定的变宽布局　224

16．2．5 “1-3-1”中列和侧列宽度固定的变宽布局　228

16．3　实例3——分列布局背景颜色问题　232

16．3．1　设置固定宽度布局的列背景色　232

16．3．2　设置特殊宽度变化布局的列背景色　234

16．3．3　设置单列宽度变化布局的列背景色　235

16．3．4　设置多列等比例宽度变化布局的列背景色　237

高手私房菜　238

第17章　制作商务类型网页

本章主要以制作红酒企业的网页来讲述商务类型网页的制作方法，使读者能掌握制作商务网页的要点。

17．1　设计整体结构　240

17．1．1　设计分析　240

17．1．2　排版架构　240

17．2　整体设置　241

17．3　设置页头　242

17．4　设置中间部分　242

17．4．1　产品展示　242

17．4．2　新闻中心　243

17．4．3　促销产品　245

17．5　页脚部分　245

高手私房菜　246

第18章　制作时尚科技类型网页

本章主要以制作时尚科技类型网页来讲述企业网页的制作方法，使读者能掌握制作企业型网页的要点。

18．1　整体布局　248

18．1．1　设计分析　248

18．1．2　排版架构　248

18．2　设计模块组成　248

18．2．1　导航区　249

18．2．2　Banner区　250

18．2．3　资讯区　250

18．2．4　页脚　251

18．3　设置链接　252

高手私房菜　252

第19章　制作在线购物类型网页

网上购物是一种便捷的购物方式，也是目前最火的购物方式。本章主要讲述购物网页的整体布局和模块组成。

19．1　整体布局　254

19．1．1　设计分析　254

19．1．2　排版架构　254

19．2　设计模块组成　254

19．2．1　导航　254

19．2．2　Banner　255

19．2．3　产品类别　256

19．2．4　页脚　256

19．3　设置链接　256

高手私房菜　256

第20章　制作娱乐休闲类型网页

本章主要介绍娱乐休闲网页制作要点及娱乐休闲网页模块组成，使读者初步了解娱乐休闲网页的制作方法。

20．1　设置网页背景　258

20．2　整体布局　258

20．2．1　设计分析　258

20．2．2　排版架构　258

20．3　设计模块组成　259

20．3．1　注册　259

20．3．2　导航　260

20．3．3　预告　261

20．3．4　新片　262

20．3．5　页脚　263

20．4　设置链接　264

高手私房菜　264

第21章　制作适合手机浏览的网页

随着智能手机的普及，制作手机网页也成为了网页制作中的重要部分。本章主要以一个简单的手机网页制作来讲述其制作方法。

21．1　整体布局　266

21．1．1　设计分析　266

21．1．2　排版架构　266

21．2　设计导航菜单　266

21．3　设置模块内容　267

高手私房菜　268

《CSS + DIV网页样式布局实战从入门到精通》通过精选案例引导读者深入学习，系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法。
　　全书共21章。第1～5章主要介绍网页样式布局的基础知识，包括基本概念和语法、代码的编写方法、盒子模型及高级特性等；第6～11章主要介绍网页样式布局的常用设置，包括网页字体与对象尺寸、文本与段落、文本样式、文本颜色与效果、背景颜色与图像及图像效果等；第12～16章主要介绍网页样式布局的高级设置，包括网页表格、链接与项目列表、导航菜单、固定宽度布局及变宽度布局等；第17～21章通过实战案例进一步讲解了基础知识的综合应用方法，包括商务、时尚科技、在线购物、娱乐休闲及手机应用等多种类型网页的布局方法。
　　在《CSS + DIV网页样式布局实战从入门到精通》附赠的DVD多媒体教学光盘中，包含了17小时与图书内容同步的教学录像及所有实例的配套源文件。此外，还赠送了大量相关学习内容的教学录像及扩展学习电子书等。为了满足读者在手机和平板电脑上学习的需要，光盘中还赠送了本书教学录像的手机版视频学习文件。
　　《CSS + DIV网页样式布局实战从入门到精通》不仅适合网页样式布局的初、中级读者学习使用，也可以作为各类院校相关专业学生和网页制作培训班的教材或辅导用书。