网页开发手记 CSS+DIV网页布局实战详解PDF电子书下载

第1篇 CSS布局基础知识 1

第1章 网页开发必备基础 2

1.1 网页文档与网页浏览器 3

1.2 网页文档的类型 4

1.2.1 什么是HTML文档 4

1.2.2 什么是XHTML文档 5

1.2.3 XHTML的页面结构 6

1.2.4 XHTML的书写格式 6

1.2.5 XHTML的语法规范 6

1.3 初识CSS——层叠样式表 7

1.4 选择合适的开发工具 8

1.4.1 TopStyle——CSS开发编辑器 8

1.4.2 Dreamweaver——网页开发编辑器 9

1.5 小结 12

第2章 CSS初体验——编写一个简单的网页文档 13

2.1 编写XHTML文档 14

2.1.1 使用Dreamweaver新建一个XHTML框架文档 14

2.1.2 手工编写XHTML文档 16

2.2 在XHTML文档中使用CSS样式的方法 16

2.2.1 行内样式 16

2.2.2 内嵌式 18

2.2.3 链接式 19

2.2.4 导入样式 21

2.2.5 样式的优先级 21

2.3 初探CSS语句 22

2.3.1 CSS语句的结构 23

2.3.2 CSS语句样式的工作原理 23

2.3.3 CSS基本书写规范 24

2.3.4 使用有意义的CSS命名 24

2.3.5 CSS样式表书写顺序 26

2.4 合理的CSS注释 26

2.5 小结 27

第3章 CSS的基本语法知识 28

3.1 选择器 29

3.1.1 标签选择器 29

3.1.2 类选择器 30

3.1.3 ID选择器 32

3.1.4 全局选择器 33

3.1.5 组合选择器 34

3.1.6 继承选择器 36

3.1.7 伪类与伪元素 39

3.2 声明 40

3.2.1 多重声明 41

3.2.2 集体声明 41

3.3 CSS的层叠原理 43

3.3.1 CSS样式来源 43

3.3.2 选择器的优先级 43

3.3.3 ！important 语句 45

3.3.4 顺序优先级 46

3.3.5 CSS的层叠规则 47

3.4 颜色单位 48

3.4.1 颜色名称 48

3.4.2 百分比颜色 49

3.4.3 数字颜色 51

3.4.4 十六进制颜色 51

3.5 长度单位 53

3.5.1 绝对单位 53

3.5.2 相对单位 54

3.6 URL 56

3.6.1 绝对URL 56

3.6.2 相对URL 56

3.7 继承性 57

3.8 小结 57

第2篇 CSS页面布局技巧 59

第4章 设置文本样式 60

4.1 字体类型 61

4.2 字体大小设置 62

4.2.1 相对大小定义 63

4.2.2 绝对大小定义 66

4.3 字体加粗 68

4.4 字体颜色 70

4.5 斜体 71

4.6 下画线、顶画线和删除线 72

4.7 英文字母大小写 74

4.8 文本的复合属性 76

4.9 文字的段落样式 76

4.9.1 段落的水平对齐方式 76

4.9.2 段落的垂直对齐方式 77

4.9.3 首行缩进 80

4.9.4 行间距与字间距 81

4.10 实例：简单的文章页面 85

4.11 小结 88

第5章 在页面内添加图片 89

5.1 在网页中插入图片 90

5.2 控制图片的大小 91

5.2.1 设置图片的固定大小 91

5.2.2 使用百分比控制图片的宽和高 92

5.2.3 单独控制图片的宽度或高度 93

5.3 为图片设置边框效果 94

5.4 图片与文本混排 95

5.5 图片无法显示 98

5.6 给图片增加链接 99

5.7 小结 100

第6章 设置页面背景 101

6.1 设置页面元素的背景色 102

6.2 设置背景图片 103

6.2.1 设置页面元素的背景图片 103

6.2.2 背景图的平铺 104

6.2.3 背景图的位置 106

6.2.4 滚动和固定的背景图 110

6.3 背景颜色和背景图片的层叠 112

6.4 背景属性 112

6.4.1 背景属性缩写 112

6.4.2 背景属性在内联元素中的使用 113

6.5 利用图片设置圆角背景 114

6.5.1 背景图片自适应高度 114

6.5.2 背景图片自适应宽度 116

6.5.3 背景图片的完全自适应 117

6.6 小结 120

第7章 用CSS控制超链接样式 121

7.1 链接的属性详解 122

7.2 链接的设置顺序与继承性 122

7.2.1 使用链接的顺序 123

7.2.2 链接的继承性 124

7.3 丰富超链接的表现形式 126

7.3.1 通过不同的链接效果显示各种状态 126

7.3.2 超链接翻转效果 129

7.4 小结 132

第8章 列表样式 133

8.1 列表的类型 134

8.1.1 无序列表 134

8.1.2 有序列表 136

8.1.3 定义列表 137

8.2 改变列表符的样式 138

8.2.1 使用自带的列表符 138

8.2.2 用背景图片改变列表符 141

8.2.3 改变列表符的位置 142

8.2.4 列表属性的简写 143

8.3 小结 143

第9章 用CSS美化表格 144

9.1 表格的基本页面元素 145

9.2 使用CSS控制表格元素 148

9.2.1 设置表格的大小 148

9.2.2 表格边框的分开与合并 149

9.2.3 表格内的文字位置 149

9.3 控制表格的边线和背景 151

9.4 小结 152

第10章 用CSS控制表单样式 153

10.1 表单的基本元素 154

10.1.1 form标签和 fieldset标签 154

10.1.2 表单域的种类 155

10.2 美化fieldset标签 156

10.3 美化表单域 158

10.3.1 美化文本框 158

10.3.2 美化下拉列表 159

10.3.3 美化提交按钮 160

10.4 小结 161

第11章 CSS滤镜的应用 162

11.1 滤镜概述 163

11.2 透明层次滤镜（alpha） 163

11.2.1 使用参数opacity 163

11.2.2 使用参数style 164

11.3 颜色透明滤镜（chroma） 167

11.4 模糊滤镜（blur） 168

11.5 固定阴影滤镜（dropshadow） 170

11.6 移动阴影滤镜（shadow） 171

11.7 光晕滤镜（glow） 172

11.8 灰度滤镜（gray） 173

11.9 反色滤镜（invert） 174

11.10 镜像滤镜（flip） 175

11.11 遮罩滤镜（mask） 176

11.12 x射线滤镜（x-ray） 177

11.13 波纹滤镜（wave） 178

11.14 小结 179

第12章 浏览器兼容问题 180

12.1 浏览器的种类及其兼容原则 181

12.2 解决兼容问题的原理 182

12.3 !important的使用 182

12.4 水平居中的问题 184

12.4.1 IE 6.0 中的水平居中 184

12.4.2 Firefox 17.0 中的水平居中 185

12.4.3 解决方法 186

12.5 列表的默认显示问题 186

12.5.1 列表的默认显示方式 186

12.5.2 默认属性的取消 187

12.6 非浮动内容和容器的问题 189

12.6.1 IE 6.0中固定宽度和高度的容器和内容 189

12.6.2 Firefox 17.0 中的容器与内容 190

12.6.3 超出容器的内容可能出现的问题和解决方法 190

12.7 使用:after伪类解决浮动的问题 192

12.7.1 IE 6.0中的浮动元素和容器 192

12.7.2 Firefox 17.0 中的浮动元素和容器 193

12.7.3 使用:after伪类清除浮动 193

12.7.4 并列浮动元素默认宽度的问题 195

12.8 嵌套元素宽度和高度叠加的问题 196

12.8.1 父元素和子元素均没有定义宽度和高度 196

12.8.2 定义子元素宽度后的效果 197

12.8.3 定义父元素宽度后的效果 198

12.8.4 解决的方法 198

12.9 小结 204

第3篇 DIV＋CSS布局 205

第13章 DIV＋CSS布局基础 206

13.1 初识DIV＋CSS布局的流程 207

13.2 了解盒模型 209

13.2.1 div标签的盒模型示例 210

13.2.2 基本盒模型 213

13.2.3 边距 214

13.2.4 边框 219

13.2.5 补白 223

13.3 块级元素与行内元素 225

13.4 CSS的浮动布局 227

13.4.1 两个元素的浮动应用 227

13.4.2 多个元素的浮动应用 230

13.4.3 清除浮动 231

13.4.4 解决Firefox的计算高度问题 232

13.5 CSS布局的相对定位 235

13.5.1 单个元素的相对定位 235

13.5.2 两个元素的相对定位 238

13.6 CSS布局方式：绝对定位 240

13.6.1 单个元素的绝对定位 240

13.6.2 两个元素的绝对定位 241

13.7 小结 243

第14章 CSS页面基本排版技术 244

14.1 固定宽度布局 245

14.1.1 一列水平居中布局 245

14.1.2 两列浮动布局 248

14.1.3 三列浮动布局 253

14.2 自适应宽度布局 258

14.2.1 两列布局：两列自适应宽度 258

14.2.2 两列布局：左列固定，右列自适应 261

14.2.3 三列布局：中间列自适应 263

14.3 复杂的页面排版 266

14.3.1 复杂的页面排版：垂直布局 266

14.3.2 复杂的页面排版：水平布局 273

14.4 小结 278

第4篇 整站的CSS定义技巧 279

第15章 关于整站样式表的分析 280

15.1 站点页面的分析 281

15.1.1 规划样式表的原则 281

15.1.2 规划样式表的方法 281

15.1.3 实例分析 282

15.2 站点二级页面的制作 283

15.2.1 日志内容页面结构的规划 283

15.2.2 日志内容页面CSS部分的制作 284

15.2.3 日志列表页的制作 287

15.3 小结 289

第16章 关于标准的校验 290

16.1 为什么要进行标准的校验 291

16.2 怎样进行标准的校验 291

16.2.1 XHTML校验的方法 291

16.2.2 CSS校验的方法 294

16.2.3 XHTML校验常见错误 294

16.2.4 CSS校验常见错误 295

16.3 实例页面的校验 295

16.3.1 实例首页的校验 295

16.3.2 一个二级页面的校验 297

16.4 小结 298

第5篇 实例制作 299

第17章 使用Dreamweaver制作中文网站 300

17.1 分析效果图 301

17.2 制作首页的切图 302

17.3 制作站点首页头部 303

17.3.1 首页头部的信息和基础样式的制作 303

17.3.2 首页头部的分析 305

17.3.3 首页头部logo和banner部分的制作 305

17.3.4 导航列表的制作 309

17.4 制作首页的主体部分 312

17.4.1 分析主体部分效果图 312

17.4.2 制作主体部分的父元素 313

17.4.3 制作主体左侧部分的样式 313

17.4.4 制作主体右侧内容中关于我们的部分 317

17.4.5 制作新闻中心部分 319

17.4.6 制作产品介绍部分和资质荣誉部分 321

17.4.7 制作合作伙伴部分 323

17.5 制作首页的底部 324

17.6 首页的兼容问题 325

17.7 二级页面的制作 326

17.8 小结 329