第1章 CSS入门 2
1.1CSS的概念 2
1.1.1网页中标记的概念 2
1.1.2HTM L与CSS的互补 2
1.1.3浏览器对CSS的支持 3
1.2网页设计中的CSS 3
1.2.1CSS能做什么 3
1.2.2CSS的局限性 3
1.3网站CSS赏析 4
1.3.1商务网站CSS样式赏析 4
1.3.2游戏网站CSS样式赏析 4
1.4实例——编写我的第一个CSS样式 5
1.4.1从零开始 5
1.4.2加入CSS控制 6
1.4.3控制图片 6
1.4.4CSS的注释 7
高手私房菜 7
第2章 CSS 3基本语法 10
2.1构造CSS规则 10
2.2实例1——基本CSS选择器 10
2.2.1标记选择器 11
2.2.2类别选择器 12
2.2.3ID选择器 15
2.3实例2——在HTML中使用CSS 16
2.3.1行内样式 16
2.3.2内嵌式 17
2.3.3链接式 18
2.3.4导入式 19
2.3.5各种方式的优先级 20
2.4CSS 3的声明 20
2.4.1标准声明 20
2.4.2合并多重声明 20
2.5属性值 21
2.5.1整数和实数 21
2.5.2长度值 22
2.5.3百分比值 22
2.5.4U R L 22
2.5.5颜色值 23
2.6CSS的继承 23
高手私房菜 24
第3章 手工与借助工具编写网页样式C 26
3.1实例1——手工编写&C 26
3.1.1从零开始 26
3.1.2设置标题 28
3.1.3控制图片 28
3.1.4设置正文 29
3.1.5设置整体页面 30
3.1.6对段落进行分别设置 30
3.1.7完整代码 31
3.2实例2——使用Dreamweaver编写 32
3.2.1使用Dreamweaver创建页面 32
3.2.2在Dreamweaver中新建CSS规则 34
3.2.3在Dreamweaver中编辑CSS规则 38
3.2.4为图像创建CSS规则 38
高手私房菜 40
第4章 盒子模型 42
4.1盒子的内部结构 42
4.2实例1——边框 42
4.2.1边框类型 42
4.2.2属性值的简写形式 44
4.2.3边框与背景 44
4.3实例2——内边距 45
4.4实例3——外边距 46
4.5实例4——盒子之间的关系 47
4.5.1HTML与DOM 47
4.5.2标准文档流 49
4.5.3div标记与span标记 49
4.6实例5——盒子在标准流中的定位原则 50
4.6.1行元素之间的水平margin 50
4.6.2块元素之间的竖直margin 51
4.6.3嵌套盒子之间的margin 52
4.6.4将margin设为负值 52
4.7实例6——盒子的浮动 53
4.7.1准备代码 53
4.7.2设置浮动的div 54
4.7.3改变浮动的方向 55
4.7.4全部向右浮动 56
4.7.5使用clear属性清除浮动的影响 56
4.8实例7——盒子的定位 57
4.8.1静态定位 58
4.8.2相对定位 58
4.8.3绝对定位 59
4.8.4固定定位 60
高手私房菜 60
第5章 CSS 3的高级特性 62
5.1实例1——复合选择器 62
5.1.1交集选择器 62
5.1.2并集选择器 62
5.1.3后代选择器 63
5.2实例2—— CSS的继承特性 64
5.2.1继承关系 65
5.2.2CSS继承的运用 65
5.3实例3—— CSS的层叠特性 66
高手私房菜 68
第6章 网页字体与对象尺寸 70
6.1实例1——指定字体属性 70
6.1.1font-weight属性 70
6.1.2font-variant属性 71
6.1.3font-style属性 72
6.1.4font简写属性 72
6.2实例2——字体族 73
6.2.1泛型字体族 73
6.2.2通常安装的字体 74
6.3实例3——设置字体 74
6.3.1选择字体集 74
6.3.2设置字体尺寸 75
6.3.3设置文字横向拉伸变形 76
6.3.4设置字体尺寸是否统 76
6.4实例4——设置对象尺寸 76
6.4.1对象宽度设定 77
6.4.2对象高度设定 77
6.4.3对象尺寸范围设定 78
6.4.4文本行高控制 78
6.4.5垂直对齐方式 79
高手私房菜 80
第7章 网页文本与段落设计 82
7.1实例1——添加文本 82
7.1.1普通文本 82
7.1.2特殊文字符号 82
7.2实例2——文本排版 83
7.2.1段落标记P与换行标记br 84
7.2.2标题标记h 1～h6 84
7.2.3文本水平居中标记center 85
7.3实例3——网页特殊字符 85
7.4实例4——文本的应用 87
高手私房菜 88
第8章 文本样式 90
8.1长度单位 90
8.2实例1——颜色定义 90
8.3实例2——准备页面 91
8.4实例3——设置文字的字体 92
8.5实例4——设置文字的倾斜效果 93
8.6实例5——设置文字的加粗效果 93
8.7实例6——英文字母大小写转换 93
8.8实例7——控制文字的大小 94
8.9实例8——文字的装饰效果 95
8.10实例9——设置段落首行缩进 95
8.11实例10——设置字词间距 96
8.12实例11——设置段落内部的文字行高 96
8.13实例12——设置段落之间的距离 97
8.14实例13——控制文本的水平位置 97
8.15实例14——设置文字与背景的颜色 98
8.16实例15——设置段落的垂直对齐方式 99
高手私房菜 100
第9章 文本颜色与效果 102
9.1实例1——文本颜色 102
9.1.1定义颜色值 102
9.1.2有效使用颜色 103
9.2实例2——特殊文本效果 104
9.2.1text-decoration属性 104
9.2.2text-transform属性 105
9.3实例3——控制文本间距 107
9.3.1letter-spacing属性 107
9.3.2word-spacing属性 108
9.3.3white-spacing属性 109
9.3.4line-height属性 111
高手私房菜 112
第10章 背景颜色与图像 114
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章 图像效果 124
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章 网页表格 138
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章 链接与项目列表 154
13.1实例1——丰富的链接特效 154
13.1.1动态超链接 154
13.1.2按钮式超链接 155
13.1.3CSS控制鼠标指针 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章 导航菜单 168
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章 固定宽度布局 192
15.1 CSS排版观念 192
15.1.1MSN的首页 192
15.1.2Hao123的首页 193
15.1.3Yahoo的首页 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章 变宽度布局 214
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设置固定宽度布局的列背景色 233
16.3.2设置特殊宽度变化布局的列背景色 234
16.3.3设置单列宽度变化布局的列背景色 235
16.3.4设置多列等比例宽度变化布局的列背景色 237
高私房菜 238
第17章 制作商务类型网页 240
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章 制作时尚科技类型网页 248
18.1整体布局 248
18.1.1设计分析 248
18.1.2排版架构 248
18.2设计模块组成 248
18.2.1导航区 249
18.2.2Banner区 250
18.2.3资讯区 250
18.2.4页脚 251
18.3设置链接 252
高手私房菜 252
第19章 制作在线购物类型网页 254
19.1整体布局 254
19.1.1设计分析 254
19.1.2排版架构 254
19.2设计模块组成 254
19.2.1导航 254
19.2.2Banner 255
19.2.3产品类别 256
19.2.4页脚 256
19.3设置链接 256
高手私房菜 256
第20章 制作娱乐休闲类型网页 258
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章 制作适合手机浏览的网页 266
21.1整体布局 266
21.1.1设计分析 266
21.1.2排版架构 266
21.2设计导航菜单 266
21.3设置模块内容 267
高手私房菜 268