CSS网页设计标准教程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．3在HTML中使用CSS的方法 19

2．3．1行内式 20

2．3．2内嵌式 20

2．3．3链接式 21

2．3．4导入式 22

2．4复合选择器 24

2．4．1交集选择器 24

2．4．2并集选择器 25

2．4．3后代选择器 27

2．5 CSS的继承特性 29

2．5．1继承关系 29

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

2．6 CSS的层叠特性 32

小结 34

习题 34

第3章 CSS设计实践 35

3．1手工方式编写页面 35

3．1．1构建页面框架 35

3．1．2设置标题 36

3．1．3控制图片 37

3．1．4设置正文 38

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

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

3．1．7完整代码 40

3．1．8 CSS的注释 41

3．2使用Dreamweaver进行CSS设置 41

3．2．1创建页面 41

3．2．2新建CSS规则 42

3．2．3编辑CSS规则 44

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

小结 47

习题 47

第4章 CSS盒子模型 48

4．1“盒子”与“模型”的概念探究 48

4．2长度单位 49

4．3边框 50

4．3．1设置边框样式 51

4．3．2属性值的简写形式 52

4．3．3边框与背景 54

4．4设置内边距 55

4．5设置外边距 56

4．6盒子之间的关系 57

4．6．1 HTML与DOM 57

4．6．2标准文档流 60

4．6．3 <div>标记与<span>标记 62

4．7盒子在标准流中的定位原则 64

4．7．1行内元素之间的水平margin 64

4．7．2块级元素之间的竖直margin 65

4．7．3嵌套盒子之间的margin 66

4．7．4 margin属性可以设置为负值 68

4．8盒子模型概念的实例 69

小结 72

习题 72

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

5．1盒子的浮动 73

5．1．1制作基础页面 73

5．1．2设置第1个浮动的div 75

5．1．3设置第2个浮动的div 75

5．1．4设置第3个浮动的div 76

5．1．5改变浮动的方向 76

5．1．6再次改变浮动的方向 76

5．1．7全部向左浮动 77

5．1．8使用clear属性清除浮动的影响 78

5．1．9扩展盒子的高度 79

5．2盒子的定位 80

5．2．1静态定位 80

5．2．2相对定位 81

5．2．3绝对定位 84

5．2．4固定定位 89

5．3 z-index空间位置 89

5．4盒子的display属性 90

小结 91

习题 91

第2部分 CSS专题技术 94

第6章 用CSS设置文本和图像 94

6．1使用CSS设置文本样式 94

6．1．1创建基础页面 94

6．1．2设置文字的字体 95

6．1．3设置文字的倾斜效果 95

6．1．4设置文字的加粗效果 96

6．1．5转换英文字母大小写 97

6．1．6控制文字的大小 98

6．1．7设置文字装饰效果 99

6．1．8设置段落首行缩进 100

6．1．9设置字词间距 101

6．1．10设置段落内部的文字行高 101

6．1．11设置段落之间的距离 102

6．1．12控制文本的水平位置 103

6．1．13设置文字与背景的颜色 103

6．2用CSS设置图像样式 104

6．2．1设置图片边框 105

6．2．2图片缩放 107

6．2．3图文混排 108

6．2．4制作八大行星科普网页实例 110

6．2．5设置图片与文字的对齐方式 113

6．3用CSS设置背景样式 117

6．3．1设置背景颜色 117

6．3．2设置背景图像 118

6．3．3设置背景图像平铺 119

6．3．4设置背景图像位置 121

6．3．5固定背景图片位置 123

6．3．6设置标题的图像替换 124

小结 127

习题 127

第7章 用CSS设置超链接与导航菜单 128

7．1制作丰富的超链接特效 129

7．2创建按钮式超链接 131

7．3制作荧光灯效果的菜单 132

7．3．1创建HTML框架 133

7．3．2设置容器的CSS样式 133

7．3．3设置菜单项的CSS样式 134

7．4控制鼠标指针 136

7．5设置项目列表样式 136

7．5．1列表的符号 137

7．5．2图片符号 139

7．6创建基于列表的导航菜单 140

7．6．1简单的竖直排列菜单 140

7．6．2横竖自由转换菜单 143

7．7应用滑动门技术的玻璃效果菜单 143

7．7．1基本思路 144

7．7．2设置菜单整体效果 145

7．7．3使用“滑动门”技术设置玻璃材质背景 146

7．7．4后续问题 147

小结 148

习题 148

第8章 用CSS设置表格和表单样式 149

8．1控制表格 149

8．1．1设置表格的边框 149

8．1．2确定表格的宽度 152

8．1．3其他与表格相关的标记 152

8．2美化表格 153

8．2．1搭建HTML结构 154

8．2．2整体设置 155

8．2．3设置单元格样式 155

8．2．4斑马纹效果 156

8．3制作日历 157

8．3．1搭建HTML结构 158

8．3．2设置整体样式和表头样式 159

8．3．3设置日历单元格样式 160

8．4 CSS与表单 163

8．4．1表单中的元素 163

8．4．2多彩的下拉菜单 166

8．5网民调查问卷实例 167

小结 169

习题 169

第9章 圆角设计 170

9．1圆角框的作用 170

9．2固定宽度圆角框 171

9．2．1两背景图像法 171

9．2．2使用透明背景图 174

9．3不固定宽度的圆角框 175

9．3．1不固定宽度圆角框的含义 175

9．3．2“4图像”单色不固定宽度圆角框 176

9．4“5图像”二维滑动门经典圆角框 178

9．4．1准备图像 179

9．4．2搭建HTML结构 180

9．4．3放置背景图像 182

9．4．4设置样式并修复缺口 183

9．4．5在整体页面中使用圆角框 184

9．4．6实现网页换肤 186

小结 189

习题 189

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

10．1搭建框架 190

10．2阵列模式 192

10．3单列模式 196

10．4改进阵列模式 198

10．5 IE6兼容 201

小结 203

习题 203

第3部分 CSS页面布局 206

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

11．1向报纸学习排版思想 206

11．2 CSS排版观念 208

11．2．1两列布局 208

11．2．2三列布局 209

11．2．3多列布局 210

11．2．4布局结构的表达式与结构图 211

11．3单列布局 214

11．3．1放置第一个圆角框 215

11．3．2设置圆角框的CSS样式 215

11．3．3放置其他圆角框 218

11．4 “1-2-1”固定宽度布局 219

11．4．1创建基本代码 219

11．4．2绝对定位法 221

11．4．3浮动法 222

11．5 “1-3-1”固定宽度布局 225

11．6 “1-（（1-2）＋1）-1”固定宽度布局 226

小结 227

习题 227

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

12．1 “1-2-1”变宽度网页布局 228

12．1．1 “1-2-1”等比例变宽布局 228

12．1．2 “1-2-1”单列变宽布局 230

12．2 “1-3-1”宽度适应布局 234

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

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

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

12．2．4进一步思考 237

12．2．5 “1-3-1”双侧列宽度固定的变宽布局 238

12．2．6 “1-3-1”中列和侧列宽度固定的变宽布局 240

12．3变宽布局方法总结 240

12．4分列布局背景色问题 241

12．5 CSS布局与传统的表格方式布局的分析 245

小结 247

习题 247

第4部分 综合案例 250

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

13．1案例概述 250

13．2内容分析 251

13．3 HTML结构设计 252

13．4原型设计 255

13．5页面方案设计 258

13．6布局设计 258

13．6．1整体样式设计 258

13．6．2页头部分 259

13．6．3内容部分 262

13．6．4页脚部分 264

13．7细节设计 265

13．7．1页头部分 265

13．7．2内容部分 270

13．7．3左侧的主要内容列 270

13．7．4右边栏 273

13．8 CSS布局的优点 276

13．9交互效果设计 277

13．9．1次导航栏 277

13．9．2主导航栏 278

13．9．3账号区 278

13．9．4图像边框 279

13．9．5产品分类 280

13．10遵从Web标准的设计流程 281

小结 282

习题 282

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

14．1分析构架 283

14．1．1设计分析 283

14．1．2排版构架 284

14．2模块拆分 285

14．2．1导航与Banner 285

14．2．2左侧列表 287

14．2．3内容部分 290

14．2．4 footer脚注 292

14．3整体调整 292

小结 293

习题 293

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

15．1分析构架 294

15．1．1设计分析 294

15．1．2排版构架 295

15．2模块拆分 296

15．2．1 Banner图片与导航菜单 296

15．2．2左侧分栏 297

15．2．3中部主体 299

15．2．4右侧分栏 301

15．2．5脚注 302

15．3最终效果 303

小结 304

习题 304