CSS网页设计标准教程 第2版PDF电子书下载

第1部分 CSS核心原理 2

第1章 （X）HTML与CSS概述 2

1.1 网页的基础概念 2

1.2 Web标准 3

1.2.1 标准的重要性 3

1.2.2 “Web标准”概述 4

1.3 HTML与XHTML 5

1.3.1 追根溯源 5

1.3.2 文档类型的含义与选择 6

1.3.3 XHTML与HTML的重要区别 7

1.4 （X）HTML与CSS 8

1.4.1 CSS标准 8

1.4.2 传统HTML的缺点 9

1.4.3 CSS的引入 10

1.4.4 如何编辑CSS 11

1.4.5 浏览器与CSS 12

小结 13

习题 13

第2章 CSS选择器与相关特性 14

2.1 构造CSS规则 14

2.2 基本CSS选择器 15

2.2.1 标记选择器 15

2.2.2 类别选择器 16

2.2.3 ID选择器 18

2.2.4 属性选择器 19

2.2.5 结构伪类选择器 21

2.2.6 UI伪类选择器 23

2.3 在HTML中使用CSS的方法 26

2.3.1 行内式 26

2.3.2 内嵌式 27

2.3.3 链接式 27

2.3.4 导入式 28

2.4 复合选择器 30

2.4.1 交集选择器 30

2.4.2 并集选择器 31

2.4.3 后代选择器 32

2.5 CSS的继承特性 34

2.5.1 继承关系 34

2.5.2 CSS继承的运用 36

2.6 CSS的层叠特性 37

小结 39

习题 39

第3章 CSS设计实践 40

3.1 手工方式编写页面 40

3.1.1 构建页面框架 40

3.1.2 设置标题 41

3.1.3 控制图片 42

3.1.4 设置正文 43

3.1.5 设置整体页面 43

3.1.6 对段落进行分别设置 43

3.1.7 完整代码 44

3.1.8 CSS的注释 45

3.2 使用Dreamweaver进行CSS设置 45

3.2.1 创建页面 45

3.2.2 新建CSS规则 46

3.2.3 编辑CSS规则 49

3.2.4 为图像创建CSS规则 50

小结 52

习题 52

第4章 CSS盒子模型 53

4.1 “盒子”与“模型”的概念探究 53

4.2 长度单位 54

4.3 边框 55

4.3.1 设置边框样式 56

4.3.2 属性值的简写形式 57

4.3.3 边框与背景 59

4.4 设置内边距 60

4.5 设置外边距 61

4.6 盒子之间的关系 62

4.6.1 HTML与DOM 62

4.6.2 标准文档流 65

4.6.3 〈div〉标记与〈span〉标记 67

4.7 盒子在标准流中的定位原则 68

4.7.1 行内元素之间的水平margin 68

4.7.2 块级元素之间的竖直margin 69

4.7.3 嵌套盒子之间的margin 70

4.7.4 margin属性可以设置为负值 72

4.8 盒子模型概念的实例 73

小结 76

习题 77

第5章 盒子的浮动与定位 78

5.1 盒子的浮动 78

5.1.1 制作基础页面 78

5.1.2 设置第1个浮动的div 79

5.1.3 设置第2个浮动的div 80

5.1.4 设置第3个浮动的div 80

5.1.5 改变浮动的方向 80

5.1.6 再次改变浮动的方向 81

5.1.7 全部向左浮动 81

5.1.8 使用clear属性清除浮动的影响 82

5.1.9 扩展盒子的高度 83

5.2 盒子的定位 84

5.2.1 静态定位 84

5.2.2 相对定位 85

5.2.3 绝对定位 88

5.2.4 固定定位 92

5.3 z-index空间位置 93

5.4 盒子的display属性 94

小结 95

习题 95

第2部分 CSS专题技术 98

第6章 用CSS设置文本 98

6.1 使用CSS设置文本样式 98

6.1.1 创建基础页面 98

6.1.2 设置文字的字体 99

6.1.3 设置文字的倾斜效果 100

6.1.4 设置文字的加粗效果 101

6.1.5 转换英文字母大小写 101

6.1.6 控制文字的大小 102

6.1.7 设置文字装饰效果 103

6.1.8 设置段落首行缩进 103

6.1.9 设置字词间距 104

6.1.10 设置段落内部的文字行高 105

6.1.11 设置段落之间的距离 106

6.1.12 控制文本的水平位置 107

6.1.13 设置文字与背景的颜色 107

6.1.14 文字阴影效果 108

6.2 用CSS设置多列布局 111

6.2.1 创建基础页面 111

6.2.2 设置多列布局 112

6.2.3 设置列宽度 113

6.2.4 设置列数 114

6.2.5 设置列间距 114

6.2.6 设置列边框样式 115

6.2.7 设置跨列显示 116

6.2.8 设置列高度 117

小结 118

习题 118

第7章 用CSS设置图像和圆角 119

7.1 用CSS设置图像样式 119

7.1.1 设置图片边框 119

7.1.2 设置多色边框 121

7.1.3 设置边框背景 123

7.1.4 设置各种边框效果 124

7.1.5 图片缩放 127

7.1.6 图文混排 128

7.1.7 制作八大行星科普网页实例 130

7.1.8 设置图片与文字的对齐方式 133

7.2 用CSS设置背景样式 137

7.2.1 设置背景颜色 137

7.2.2 设置背景图像 138

7.2.3 设置背景图像平铺 139

7.2.4 设置多重背景图像 141

7.2.5 设置背景图像位置 142

7.2.6 固定背景图片位置 145

7.2.7 设置背景图像坐标原点 145

7.2.8 设置背景图像的大小 147

7.2.9 设置标题的图像替换 148

7.3 设置圆角效果 151

7.3.1 圆角属性 151

7.3.2 圆角实例 151

小结 159

习题 159

第8章 用CSS设置超链接与导航菜单 160

8.1 制作丰富的超链接特效 161

8.2 创建按钮式超链接 163

8.3 制作荧光灯效果的菜单 164

8.3.1 创建HTML框架 164

8.3.2 设置容器的CSS样式 165

8.3.3 设置菜单项的CSS样式 165

8.4 控制鼠标指针 167

8.5 设置项目列表样式 168

8.5.1 列表的符号 168

8.5.2 图片符号 170

8.6 创建基于列表的导航菜单 171

8.6.1 简单的竖直排列菜单 171

8.6.2 横竖自由转换菜单 173

8.7 应用滑动门技术的玻璃效果菜单 174

8.7.1 基本思路 174

8.7.2 设置菜单整体效果 175

8.7.3 使用“滑动门”技术设置玻璃材质背景 176

小结 177

习题 177

第9章 用CSS设置表格和表单样式 178

9.1 控制表格 178

9.1.1 设置表格的边框 178

9.1.2 确定表格的宽度 180

9.1.3 其他与表格相关的标记 181

9.2 美化表格 182

9.2.1 搭建HTML结构 182

9.2.2 整体设置 183

9.2.3 设置单元格样式 183

9.2.4 斑马纹效果 184

9.3 制作日历 184

9.3.1 搭建HTML结构 185

9.3.2 设置整体样式和表头样式 187

9.3.3 设置日历单元格样式 188

9.4 CSS与表单 189

9.4.1 表单中的元素 190

9.4.2 多彩的下拉菜单 192

9.5 网民调查问卷实例 193

小结 196

习题 196

第10章 网页样式综合案例——灵活的电子相册 197

10.1 搭建框架 197

10.2 阵列模式 199

10.3 单列模式 203

10.4 改进阵列模式 205

小结 209

习题 209

第3部分 CSS页面布局 212

第11章 固定宽度布局剖析与制作 212

11.1 向报纸学习排版思想 212

11.2 CSS排版观念 214

11.2.1 两列布局 214

11.2.2 三列布局 215

11.2.3 多列布局 216

11.2.4 布局结构的表达式与结构图 217

11.3 单列布局 220

11.3.1 放置第一个圆角框 221

11.3.2 设置圆角框的CSS样式 221

11.3.3 放置其他圆角框 223

11.4 “1-2-1”固定宽度布局 224

11.4.1 创建基本代码 225

11.4.2 绝对定位法 226

11.4.3 浮动法 228

11.5 “1-3-1”固定宽度布局 230

11.6 “1-（（1-2）+1）-1”固定宽度布局 231

小结 232

习题 233

第12章 变宽度网页布局剖析与制作 234

12.1 “1-2-1”变宽度网页布局 234

12.1.1 “1-2-1”等比例变宽布局 234

12.1.2 “1-2-1”单列变宽布局 236

12.2 “1-3-1”宽度适应布局 240

12.2.1 “1-3-1”三列宽度等比例布局 240

12.2.2 “1-3-1”单侧列宽度固定的变宽布局 240

12.2.3 “1-3-1”中间列宽度固定的变宽布局 241

12.2.4 进一步思考 243

12.2.5 “1-3-1”双侧列宽度固定的变宽布局 244

12.2.6 “1-3-1”中列和侧列宽度固定的变宽布局 246

12.3 变宽布局方法总结 246

12.4 分列布局背景色问题 247

12.5 CSS布局与传统的表格方式布局的分析 251

小结 253

习题 253

第4部分 综合案例 256

第13章 综合案例——儿童用品网上商店 256

13.1 案例概述 256

13.2 内容分析 257

13.3 HTML结构设计 258

13.4 原型设计 261

13.5 页面方案设计 263

13.6 布局设计 264

13.6.1 整体样式设计 264

13.6.2 页头部分 265

13.6.3 内容部分 267

13.6.4 页脚部分 269

13.7 细节设计 270

13.7.1 页头部分 270

13.7.2 内容部分 275

13.7.3 左侧的主要内容列 275

13.7.4 右边栏 278

13.8 CSS布局的优点 281

13.9 交互效果设计 282

13.9.1 次导航栏 282

13.9.2 主导航栏 283

13.9.3 账号区 283

13.9.4 图像边框 284

13.9.5 产品分类 285

13.10 遵从Web标准的设计流程 286

小结 287

习题 287

第14章 综合案例——博客网站 288

14.1 分析构架 288

14.1.1 设计分析 288

14.1.2 排版构架 289

14.2 模块拆分 290

14.2.1 导航与Banner 290

14.2.2 左侧列表 292

14.2.3 内容部分 295

14.2.4 脚注部分 296

14.3 整体调整 297

小结 298

习题 298

第15章 综合案例——旅游门户网站 299

15.1 分析构架 299

15.1.1 设计分析 299

15.1.2 排版构架 300

15.2 模块拆分 301

15.2.1 Banner图片与导航菜单 301

15.2.2 左侧分栏 302

15.2.3 中部主体 304

15.2.4 右侧分栏 306

15.2.5 脚注 307

15.3 最终效果 308

小结 309

习题 309