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