网站开发非常之旅 CSS标准网页布局开发指南PDF电子书下载

第1篇 CSS布局基础知识 3

第1章 Web标准布局的本质 3

1.1 为什么要建立Web标准 4

1.1.1 建立Web标准的目的 4

1.1.2 使用Web标准的好处 4

1.2 什么是Web标准 5

1.3 内容、结构和表现 5

1.4 两种思考方式 7

1.5 Web标准的前景 9

1.6 Web标准网站欣赏 10

第2章 XHTML书写规范 13

2.1 为什么要使用XHTML 14

2.2 什么是XHTML 14

2.3 XHTML语法基础 16

2.3.1 XHTML页面结构 16

2.3.2 元素的书写格式和属性 17

2.3.3 各种元素的属性 18

2.4 XHTML代码规范 22

第3章 CSS基础与书写规范 25

3.1 CSS的基础知识 26

3.1.1 什么是CSS 26

3.1.2 CSS的语法 27

3.1.3 选择符 27

3.1.4 属性 29

3.1.5 伪类和伪元素 29

3.1.6 颜色单位 29

3.1.7 长度单位 30

3.1.8 百分比值 31

3.1.9 URL 31

3.1.10 默认值 32

3.1.11 继承性 32

3.2 CSS编码规范 33

3.2.1 CSS基本书写规范 33

3.2.2 CSS命名参考 34

3.2.3 CSS样式表书写顺序 35

3.3 怎样更好地应用CSS 35

3.3.1 块元素和内联元素 35

3.3.2 一些CSS的实用技巧 35

3.3.3 怎样调试CSS 36

3.4 关于CSS的学习 38

第2篇 CSS页面布局技巧 43

第4章 网页头部元素的详细定义 43

4.1 DOCTYPE的选择 44

4.1.1 什么是DOCTYPE 44

4.1.2 选择什么样的DOCTYPE 44

4.2 名字空间 45

4.3 编码问题 45

4.4 meta标签 45

4.5 CSS的调用 46

4.5.1 调用样式表的几种方法 46

4.5.2 应用样式的优先级 49

4.6 网页头部实例 52

第5章 CSS基本布局属性 55

5.1 页面的制作流程和整体分析 56

5.2 元素定位基础知识 57

5.2.1 块元素的默认排列 57

5.2.2 内联元素的默认排列 58

5.2.3 块元素和内联元素的混合默认排列 58

5.2.4 使用浮动属性进行定位 59

5.3 定位属性详解 60

5.3.1 定位模式 60

5.3.2 边偏移 60

5.3.3 层叠定位属性 60

5.4 定位属性的应用 61

5.4.1 绝对定位 61

5.4.2 相对定位 63

5.4.3 固定定位 65

5.4.4 层叠定位属性的使用 65

5.5 页面的背景设定 66

5.5.1 使用背景色定义背景 66

5.5.2 背景图片默认使用 66

5.5.3 背景图片的重复 67

5.5.4 背景图片的位置 68

5.5.5 背景图片的附件 71

5.6 背景的综合应用 72

5.6.1 背景颜色和背景图片的层叠 72

5.6.2 背景图片的重复和位置的关系 73

5.6.3 背景属性在内联元素中的使用 73

5.6.4 背景属性的缩写 74

5.6.5 页面文本的样式 75

5.6.6 链接的样式 75

5.7 布局的基础 76

5.7.1 布局页面的步骤 76

5.7.2 使用ID还是Class 77

5.7.3 控制内容显示的display属性 78

5.7.4 控制内容显示的visibility属性 79

5.7.5 使用text-align属性的水平居中 80

5.7.6 使用margin属性的水平居中 81

5.8 浮动属性 82

5.8.1 浮动属性详解 82

5.8.2 相邻的浮动元素和固定元素 82

5.8.3 相邻的两个浮动元素 83

5.8.4 相邻的多个浮动元素 84

5.9 关于ul和li的样式详解 85

5.9.1 使用list-style-type属性 85

5.9.2 使用list-style-position属性 86

5.9.3 使用list-style-image属性 87

5.9.4 list-style属性 87

5.10 一个纵向导航菜单的制作 88

5.10.1 菜单原理 88

5.10.2 制作菜单内容和结构部分 88

5.10.3 CSS代码编写 89

5.11 一个横向导航菜单的制作 93

5.11.1 菜单原理 93

5.11.2 制作菜单内容和结构部分 93

5.11.3 CSS代码编写 94

5.12 清除浮动 97

5.12.1 清除浮动属性详解 97

5.12.2 清除浮动属性的使用 99

5.13 页面header部分的制作 100

5.13.1 效果图的分析 100

5.13.2 第一次切图 101

5.13.3 第二次切图 102

5.13.4 制作前的准备工作 103

5.13.5 分析效果图 104

5.13.6 页面结构的制作 105

5.13.7 基础样式的定义 105

5.13.8 banner部分样式的定义 106

5.13.9 menu部分样式的定义 107

5.13.10 页面全部的CSS代码 109

第6章 CSS容器属性 111

6.1 什么是盒模型 112

6.1.1 内容与盒模型 112

6.1.2 背景与盒模型 113

6.2 补白属性 113

6.2.1 补白属性详解 113

6.2.2 百分比值的使用 115

6.2.3 单侧的补白属性 117

6.2.4 补白属性的简写 117

6.3 边框属性 119

6.3.1 边框样式 119

6.3.2 边框宽度 121

6.3.3 边框颜色 122

6.3.4 边框的综合定义 123

6.3.5 单侧边框的综合定义 124

6.3.6 一个有用的表格边框属性 125

6.3.7 应用边框属性的实例 126

6.4 边界属性 127

6.4.1 边界属性 127

6.4.2 单侧的边界和简写 128

6.4.3 垂直方向的边界重叠 129

6.4.4 水平方向的边界 130

6.4.5 负的边界值 131

6.4.6 在内联元素中使用边界属性 132

6.5 父元素与子元素之间的距离 133

6.5.1 子元素边界属性值为0 133

6.5.2 父元素的补白属性为0 134

6.5.3 父元素含有padding属性同时子元素含有margin属性 135

6.6 嵌套的元素中使用负边界 136

6.7 固定大小的问题 137

6.7.1 盒模型大小的计算 138

6.7.2 使用overflow属性固定长度和宽度 138

6.8 自适应问题 139

6.8.1 什么叫自适应 139

6.8.2 独立元素的高度自适应 139

6.8.3 利用背景色的两列自适应 141

6.8.4 左右均能自适应的两列布局 143

6.8.5 三列布局中有两列内容固定 145

6.8.6 三列布局中有一列内容固定 147

6.8.7 三列布局中高度都不确定的情况 151

6.8.8 水平自适应的原理 153

6.9 制作一个简单的页面框架 154

6.9.1 框架结构分析 154

6.9.2 页面结构的制作 155

6.9.3 定义CSS代码 156

6.9.4 页面最终效果及注意的问题 160

6.10 header部分的进一步完善 161

6.10.1 标题及签名部分的完善 161

6.10.2 导航部分的完善 163

6.10.3 调整后的页面效果 164

6.11 页面主体结构的制作 165

6.11.1 效果图的分析 165

6.11.2 主体大表格和内容部分 166

6.11.3 右侧分类导航部分 167

6.12 页面主体部分CSS的编写 169

6.12.1 3个主要结构的样式 169

6.12.2 内容部分的样式 171

6.12.3 导航列表部分的CSS编写 172

6.12.4 主体部分最后的显示效果和CSS代码 175

第7章 CSS定义文本属性 179

7.1 文本的缩进和对齐 180

7.1.1 段首缩进 180

7.1.2 段首字符下沉与大写 181

7.1.3 文本的对齐 181

7.1.4 图文混排 183

7.2 行高与间隔 184

7.2.1 行高属性详解 184

7.2.2 利用行高属性使文本垂直居中 187

7.2.3 间隔与空白 188

7.2.4 文本的转换 190

7.3 水平和垂直居中问题 191

7.3.1 已知容器和内容大小的水平和垂直居中问题 191

7.3.2 未知容器的大小而已知内容大小的水平和垂直居中问题 192

7.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 193

7.3.4 容器的大小和内容大小均未知的水平和垂直居中 196

7.3.5 修饰图片的水平和垂直居中 197

7.4 字体的综合属性 198

7.4.1 字体的选择 198

7.4.2 字体的大小 199

7.4.3 字体的加粗 201

7.4.4 字体的样式 202

7.4.5 字体的变形 202

7.4.6 字体属性的简写 203

7.5 文本的修饰和链接 204

7.5.1 文本的修饰 204

7.5.2 链接属性详解 206

7.5.3 使用链接的顺序 208

7.5.4 链接的继承性 209

7.5.5 cursor属性 210

7.6 完成页面header部分的制作 211

7.6.1 标题和签名部分 211

7.6.2 menu导航部分 213

7.7 main部分的完善 215

7.7.1 内容部分的完善 215

7.7.2 分类导航部分的完善 217

7.8 footer部分的制作 220

7.8.1 效果图的分析 220

7.8.2 结构部分的制作 221

7.8.3 页面样式的添加 221

7.9 页面在IE浏览器中的显示效果 224

第8章 元素的修饰和CSS常见应用 225

8.1 图片的修饰 226

8.1.1 网页中常用的图片格式 226

8.1.2 需要使用图片的情况 226

8.1.3 作为背景的图片修饰 227

8.1.4 修饰内容图片 227

8.2 使用图片制作简单圆角框 229

8.2.1 单色或者单线圆角框自适应高度 229

8.2.2 单色或者单线圆角框自适应宽度 231

8.2.3 单色或者单线圆角框完全自适应 232

8.3 复杂圆角框的制作 234

8.3.1 自适应高度 235

8.3.2 自适应宽度 235

8.3.3 完全自适应 236

8.4 用CSS制作代替图片的圆角 239

8.4.1 CSS圆角实现原理 239

8.4.2 CSS圆角的制作 240

8.5 表单的修饰 243

8.5.1 表单的分类 243

8.5.2 文本域的修饰 245

8.5.3 文本区域的修饰 245

8.5.4 按钮的修饰 246

8.5.5 复选框的修饰 246

8.5.6 单选按钮的修饰 247

8.5.7 列表的修饰 247

8.5.8 文件域的修饰 247

8.5.9 图像域的修饰 248

8.6 登录框的制作 248

8.6.1 效果图的分析 248

8.6.2 页面结构部分制作 249

8.6.3 CSS部分的编写 249

8.7 滚条的修饰 252

8.7.1 滚条的显示 253

8.7.2 滚条的修饰 254

8.8 表格的修饰 255

8.8.1 控制表格的边线和背景 255

8.8.2 表格中的高度和宽度 256

8.8.3 表格的居中问题 257

8.8.4 表格的内容与高度 258

8.9 分隔线的修饰 258

8.10 关于导航栏的制作和修饰 260

8.10.1 纵向导航栏的修饰 260

8.10.2 制作链接样式 262

8.10.3 制作鼠标悬停效果 262

8.10.4 横向导航栏 265

8.11 下拉菜单的制作 266

8.11.1 下拉菜单的显示效果 266

8.11.2 菜单的原理 266

8.11.3 制作菜单结构部分 266

8.11.4 编写主导航部分的样式 267

8.11.5 编写子栏目的样式 268

8.11.6 隐藏子栏目 269

8.11.7 制作显示效果的样式 269

8.11.8 使用的脚本代码 270

8.12 遮盖的问题 270

第9章 浏览器及兼容问题 273

9.1 浏览器介绍 274

9.2 要兼容哪些浏览器 274

9.3 解决兼容问题的原理 275

9.4 !important的使用 275

9.5 水平居中的问题 276

9.5.1 IE 6.0中的水平居中 277

9.5.2 FIREFOX 2.0中的水平居中 277

9.5.3 解决方法 278

9.6 非浮动内容和容器的问题 278

9.6.1 IE 6.0中固定宽度和高度的容器和内容 278

9.6.2 FIREFOX 2.0中的容器与内容 278

9.6.3 可能出现的问题和解决方法 279

9.7 使用：after伪类解决浮动的问题 280

9.7.1 IE 6.0中的浮动元素和容器 280

9.7.2 FIREFOX 2.0中的浮动元素和容器 281

9.7.3 使用：after伪类清除浮动 281

9.7.4 并列浮动元素默认宽度的问题 282

9.8 嵌套元素宽度和高度叠加的问题 283

9.8.1 父元素和子元素均没有定义宽度和高度 283

9.8.2 定义子元素的宽度后的效果 284

9.8.3 定义父元素宽度后的效果 284

9.8.4 解决的方法 285

9.9 子元素负边界的问题 286

9.9.1 IE 6.0中子元素的负边界 287

9.9.2 FIREFOX 2.0中子元素的负边界 287

9.9.3 解决方法 287

9.10 列表的默认显示问题 288

9.10.1 列表的默认显示方式 288

9.10.2 默认属性的取消 289

9.11 IE 6.0中的问题 290

9.11.1 浮动元素的双边距和零边距问题 290

9.11.2 浮动列表的问题 294

9.11.3 图片的间隙问题 295

9.12 IE 7.0中的问题 295

9.12.1 内容和容器的显示方式不同 296

9.12.2 支持！important的声明 296

9.12.3 嵌套的问题 297

9.12.4 浮动子元素的问题 298

9.12.5 和IE 6.0相同的问题 299

9.13 兼容问题实例 299

9.13.1 纵向导航菜单的兼容 299

9.13.2 横向导航菜单的兼容 303

9.13.3 自适应高度的兼容 305

9.13.4 实例制作中的兼容问题 307

第3篇 整站的CSS定义技巧 315

第10章 关于整站样式表的分析 315

10.1 站点页面分析 316

10.1.1 规划样式表的原则 316

10.1.2 规划样式表的方法 316

10.1.3 实例分析 317

10.2 站点二级页面的制作 318

10.2.1 日志内容页面结构的规划 318

10.2.2 日志内容页面CSS部分的制作 319

10.2.3 日志列表页面的制作 322

第11章 关于标准的校验 325

11.1 为什么要进行标准的校验 326

11.2 怎样进行标准的校验 326

11.2.1 XHTML校验的方法 326

11.2.2 CSS校验的方法 328

11.2.3 XHTML校验常见错误 329

11.2.4 CSS校验常见错误 330

11.3 实例页面的校验 330

11.3.1 实例首页的校验 330

11.3.2 一个二级页面的校验 332

第4篇 实例制作 337

第12章 一个英文网站的制作 337

12.1 分析效果图 338

12.2 切图 339

12.2.1 制作首页的切图 340

12.2.2 二级页面的切图 341

12.3 制作站点首页头部 341

12.3.1 首页头部的信息和基础样式的制作 342

12.3.2 首页头部的分析 343

12.3.3 首页头部结构的制作 343

12.3.4 首页头部CSS代码的编写 344

12.4 制作首页的主体部分 346

12.4.1 分析主体部分效果图 346

12.4.2 制作主体左侧部分的结构 347

12.4.3 制作主体左侧部分的样式 348

12.4.4 制作主体中间部分的结构 351

12.4.5 制作主体中间部分的样式 352

12.4.6 制作主体右侧部分的结构 354

12.4.7 制作主体右侧部分的样式 355

12.5 制作首页的底部 357

12.6 首页的兼容问题 358

12.7 二级页面的制作 359

12.7.1 分析二级页面的效果图 359

12.7.2 制作二级页面中间内容部分的结构 360

12.7.3 制作二级页面中间内容部分的样式 361

12.7.4 制作二级页面右侧部分的结构 363

12.7.5 制作二级页面右侧部分的样式 363

第13章 使用Dreamweaver制作中文网站 365

13.1 分析效果图 366

13.2 切图 367

13.3 制作站点首页头部 369

13.3.1 首页头部的信息和基础样式的制作 369

13.3.2 首页头部的分析 371

13.3.3 首页头部logo和banner部分的制作 372

13.3.4 导航列表的制作 375

13.4 制作首页的主体部分 378

13.4.1 分析主体部分效果图 378

13.4.2 制作主体部分的父元素 378

13.4.3 制作主体左侧部分的样式 379

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

13.4.5 制作今日新闻部分 385

13.4.6 制作点拨和时评的部分 387

13.4.7 制作合作伙伴部分 389

13.5 制作首页的底部 390

13.6 首页的兼容问题 391

13.7 二级页面的制作 392

附录A CSS标记速查 395