CSS+DIV网页布局技术详解PDF电子书下载

第1篇 CSS布局基础知识 2

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

1.1为什么要建立Web标准 2

1.1.1建立Web标准的目的 2

1.1.2使用Web标准的好处 2

1.2什么是Web标准 3

1.3结构和表现 3

1.4两种思考方式 5

1.5 Web标准的前景 7

1.6 Web标准网站欣赏 7

第2章 XHTML书写规范 10

2.1为什么要使用XHTML 10

2.2什么是XHTML 10

2.3 XHTML语法基础 12

2.3.1 XHTML页面结构 12

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

2.3.3各种元素的属性 14

2.4 XHTML代码规范 18

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

3.1 CSS的基础知识 20

3.1.1什么是CSS 20

3.1.2 CSS的语法 21

3.1.3选择符 22

3.1.4属性 23

3.1.5伪类和伪元素 23

3.1.6颜色单位 24

3.1.7长度单位 24

3.1.8百分比值 25

3.1.9 URL 26

3.1.10默认值 26

3.1.11继承性 26

3.2 CSS编码规范 27

3.2.1 CSS基本书写规范 27

3.2.2 CSS命名参考 28

3.2.3 CSS样式表书写顺序 29

3.3怎样更好地应用CSS 29

3.3.1块元素和内联元素 29

3.3.2 CSS的一些实用技巧 30

3.3.3怎样调试CSS 30

3.4关于CSS的学习 33

第2篇 CSS页面布局技巧 36

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

4.1 DOCTYPE的选择 36

4.1.1什么是DOCTYPE 36

4.1.2选择什么样的DOCTYPE 36

4.2名字空间 37

4.3编码问题 37

4.4 meta标签 38

4.5 CSS的调用 39

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

4.5.2应用样式的优先级 41

4.6网页头部实例 45

第5章 CSS基本布局属性 47

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

5.2元素定位基础知识 48

5.2.1块元素的默认排列 48

5.2.2内联元素的默认排列 49

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

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

5.3定位属性详解 51

5.3.1定位模式 51

5.3.2边偏移 51

5.3.3层叠定位属性 51

5.4定位属性的应用 52

5.4.1绝对定位 52

5.4.2相对定位 54

5.4.3固定定位 55

5.4.4层叠定位属性的使用 55

5.5页面背景的设定 57

5.5.1使用背景色定义背景 57

5.5.2背景图片的默认使用 57

5.5.3背景图片的重复 58

5.5.4背景图片的位置 59

5.5.5背景图片的附件 61

5.6背景的综合应用 62

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

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

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

5.6.4背景属性的缩写 64

5.6.5页面文本的样式 65

5.6.6链接的样式 66

5.7布局的基础知识 67

5.7.1页面布局的步骤 67

5.7.2使用id还是class 67

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

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

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

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

5.8浮动属性 72

5.8.1浮动属性详解 72

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

5.8.3相邻的两个浮动元素 74

5.8.4相邻的多个浮动元素 75

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

5.9.1使用list-style-type属性 76

5.9.2使用list-style-position属性 76

5.9.3使用list-style-image属性 77

5.9.4使用list-style属性 78

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

5.10.1菜单原理 78

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

5.10.3CSS代码编写 79

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

5.11.1菜单原理 83

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

5.11.3CSS代码编写 84

5.12清除浮动 87

5.12.1清除浮动属性详解 87

5.12.2清除浮动属性的使用 88

5.13页面header部分的制作 90

5.13.1效果图分析（1） 90

5.13.2第一次切图 90

5.13.3第二次切图 91

5.13.4制作前的准备工作 92

5.13.5效果图分析（2） 93

5.13.6页面结构的制作 93

5.13.7基础样式的定义 94

5.13.8banner部分样式的定义 95

5.13.9menu部分样式的定义 96

5.13.10页面全部的CSS代码 97

第6章 CSS容器属性 99

6.1什么是盒模型 99

6.1.1内容与盒模型 99

6.1.2背景与盒模型 100

6.2补白属性 100

6.2.1补白属性详解 101

6.2.2百分比值的使用 102

6.2.3单侧的补白属性 103

6.2.4补白属性的简写 104

6.3边框属性 106

6.3.1边框样式 106

6.3.2边框宽度 107

6.3.3边框颜色 108

6.3.4边框的综合定义 110

6.3.5单侧边框的综合定义 111

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

6.3.7应用边框属性的实例 112

6.4边界属性 113

6.4.1整体边界属性 114

6.4.2单侧的边界和简写 115

6.4.3垂直方向的边界重叠 116

6.4.4水平方向的边界 116

6.4.5负的边界值 117

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

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

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

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

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

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

6.7固定大小的问题 123

6.7.1盒模型大小的计算 123

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

6.8自适应问题 125

6.8.1什么叫自适应 125

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

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

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

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

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

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

6.8.8水平自适应的原理 138

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

6.9.1框架结构分析 140

6.9.2页面结构的制作 141

6.9.3定义CSS代码 141

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

6.10header部分的进一步完善 146

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

6.10.2导航部分的完善 147

6.10.3调整后的页面效果 149

6.11页面主体结构的制作 149

6.11.1效果图分析 149

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

6.11.3右侧分类导航部分 152

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

6.12.1 3个主要结构的样式 154

6.12.2内容部分的样式 155

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

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

第7章 CSS定义文本属性 163

7.1文本的缩进和对齐 163

7.1.1段首缩进 163

7.1.2段首字符的下沉与大写 164

7.1.3文本的对齐 165

7.1.4图文混排 166

7.2行高与间隔 167

7.2.1行高属性详解 167

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

7.2.3间隔与空白 171

7.2.4文本的转换 173

7.3水平和垂直居中问题 174

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

7.3.2未知容器大小、已知内容大小时的水平和垂直居中问题 175

7.3.3已知容器大小、未知内容大小时的水平和垂直居中问题 176

7.3.4容器大小及内容大小均未知时的水平和垂直居中问题 178

7.3.5修饰图片的水平和垂直居中问题 180

7.4字体的综合属性 180

7.4.1字体的选择 180

7.4.2字体的大小 181

7.4.3字体的加粗 183

7.4.4字体的样式 184

7.4.5字体的变形 185

7.4.6字体属性的简写 185

7.5文本的修饰和链接 186

7.5.1文本的修饰 187

7.5.2链接属性详解 188

7.5.3使用链接的顺序 190

7.5.4链接的继承性 191

7.5.5 cursor属性 192

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

7.6.1标题和签名部分 193

7.6.2 menu导航部分 194

7.7 main部分的完善 197

7.7.1内容部分的完善 197

7.7.2分类导航部分的完善 198

7.8 footer部分的制作 202

7.8.1效果图分析 202

7.8.2结构部分的制作 202

7.8.3页面样式的添加 202

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

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

8.1图片的修饰 206

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

8.1.2需要使用图片的情况 207

8.1.3作为背景的图片修饰 207

8.1.4修饰内容图片 207

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

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

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

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

8.3复杂圆角框的制作 214

8.3.1自适应高度 215

8.3.2自适应宽度 216

8.3.3完全自适应 216

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

8.4.1 CSS圆角实现原理 219

8.4.2 CSS圆角的制作 220

8.5表单的修饰 223

8.5.1表单的分类 223

8.5.2文本域的修饰 224

8.5.3文本区域的修饰 225

8.5.4按钮的修饰 226

8.5.5复选框的修饰 226

8.5.6单选按钮的修饰 226

8.5.7列表的修饰 227

8.5.8文件域的修饰 227

8.5.9图像域的修饰 228

8.6登录框的制作 228

8.6.1效果图分析 228

8.6.2页面结构部分制作 229

8.6.3 CSS部分的编写 229

8.7滚动条的修饰 232

8.7.1滚动条的显示 232

8.7.2滚动条的修饰 234

8.8表格的修饰 235

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

8.8.2表格的高度和宽度 236

8.8.3表格的居中问题 236

8.8.4表格的内容与高度 237

8.9分隔线的修饰 238

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

8.10.1纵向导航栏的修饰 240

8.10.2制作链接样式 241

8.10.3制作鼠标悬停效果 241

8.10.4横向导航栏 244

8.11下拉菜单的制作 244

8.11.1下拉菜单的显示效果 244

8.11.2菜单的原理 245

8.11.3制作菜单结构部分 245

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

8.11.5编写子栏目的样式 247

8.11.6隐藏子栏目 247

8.11.7制作显示效果的样式 248

8.11.8使用的脚本代码 248

8.12遮盖的问题 249

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

第9章 DIV+CSS布局基础 252

9.1初识DIV+CSS布局的流程 252

9.2了解盒模型 254

9.2.1div标签的盒模型示例 254

9.2.2基本盒模型 258

9.2.3边距 258

9.2.4补白 262

9.2.5边框 264

9.3页面元素的布局 268

9.3.1块级元素与行内元素 268

9.3.2 CSS布局方式：常规流 270

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

10.1站点页面的分析 272

10.1.1规划样式表的原则 272

10.1.2规划样式表的方法 272

10.1.3实例的分析 273

10.2站点二级页面的制作 274

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

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

10.2.3日志列表页的制作 278

第11章 关于标准的校验 281

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

11.2怎样进行标准的校验 281

11.2.1 XHTML校验的方法 281

11.2.2 CSS校验的方法 284

11.2.3 XHTML校验常见错误 285

11.2.4 CSS校验常见错误 285

11.3实例页面的校验 285

11.3.1实例首页的校验 286

11.3.2一个二级页面的校验 287

第4篇 DIV+CSS布局实例 290

第12章 DIV+CSS页面布局设计 290

12.1页面布局的准备 290

12.1.1效果图的制作 290

12.1.2框架的规划 291

12.1.3布局图片的分离与制作 295

12.2页面的制作 296

12.2.1框架代码的编写 296

12.2.2内容代码的编写 298

12.2.3 CSS代码的编写 299

第13章 新闻系统的页面布局 304

13.1新闻系统的页面分析 304

13.2新闻系统首页的设计 304

13.2.1效果图的设计 304

13.2.2框架的规划 305

13.2.3布局图片的分离与制作 308

13.2.4框架代码的编写 309

13.2.5内容代码的编写 310

13.2.6 CSS代码的编写 311

13.2.7预览效果及微调 315

13.3新闻系统栏目页面的设计 315

13.3.1效果图的设计 315

13.3.2框架的规划 315

13.3.3布局图片的分离与制作 320

13.3.4框架代码的编写 320

13.3.5内容代码的编写 322

13.3.6 CSS代码的编写 323

13.3.7预览效果及微调 323

13.4新闻系统列表页的设计 324

13.4.1效果图的设计 324

13.4.2框架的规划 325

13.4.3布局图片的分离与制作 325

13.4.4框架代码的编写 326

13.4.5内容代码的编写 326

13.4.6 CSS代码的编写 327

13.4.7预览效果及微调 327

13.5新闻系统内容页的设计 327

13.5.1效果图的设计 327

13.5.2框架的规划 327

13.5.3布局图片的分离与制作 329

13.5.4框架代码的编写 329

13.5.5内容代码的编写 330

13.5.6 CSS代码的编写 330

13.5.7预览效果及微调 330

第14章 微博系统的页面布局 331

14.1微博系统的页面分析 331

14.2微博系统个人首页的设计 331

14.2.1效果图的设计 331

14.2.2框架的规划 332

14.2.3布局图片的分离与制作 335

14.2.4框架代码的编写 336

14.2.5内容代码的编写 339

14.2.6 CSS代码的编写 340

14.2.7预览效果及微调 342

14.3微博系统相册列表页的设计 343

14.3.1效果图的设计 343

14.3.2框架的规划 344

14.3.3布局图片的分离与制作 344

14.3.4框架代码的编写 344

14.3.5 CSS代码的编写 345

14.3.6预览效果及微调 346

14.4微博系统相册幻灯页的设计 346

14.4.1效果图的设计 346

14.4.2源代码分析 346

14.4.3布局图片的分离与制作 348

14.5微博系统日志详情页的设计 349

14.5.1效果图的设计 349

14.5.2框架的规划 349

14.5.3框架代码的编写 351

14.5.4 CSS代码的编写 352

14.5.5预览效果及微调 353

14.6微博系统微频道（广场）的设计 353

14.6.1效果图的设计 353

14.6.2框架的规划 353

14.6.3框架代码的编写 354

14.6.4内容代码的编写 356

14.6.5 CSS代码的编写 356

14.6.6预览效果及微调 358

第15章 论坛系统的页面布局 359

15.1论坛系统的页面分析 359

15.2论坛系统首页的设计 359

15.2.1效果图的设计 359

15.2.2框架的规划 359

15.2.3布局图片的分离与制作 363

15.2.4框架代码的编写 363

15.2.5内容代码的编写 365

15.2.6 CSS代码的编写 366

15.2.7预览效果及微调 369

15.3论坛系统栏目页的设计 369

15.3.1效果图的设计 369

15.3.2框架的规划 369

15.3.3布局图片的分离与制作 371

15.3.4框架代码的编写 371

15.3.5内容代码的编写 372

15.3.6 CSS代码的编写 373

15.3.7预览效果及微调 374

15.4论坛系统版块页的设计 374

15.4.1效果图的设计 374

15.4.2框架的规划 375

15.4.3布局图片的分离与制作 377

15.4.4框架代码的编写 377

15.4.5内容代码的编写 379

15.4.6 CSS代码的编写 380

15.4.7预览效果及微调 381

15.5论坛系统内容页的设计 381

15.5.1效果图的设计 381

15.5.2框架的规划 383

15.5.3布局图片的分离与制作 384

15.5.4框架代码的编写 384

15.5.5内容代码的编写 386

15.5.6 CSS代码的编写 387

15.5.7预览效果及微调 388

第16章 商城系统的页面布局 389

16.1商城系统的页面分析 389

16.2商城系统首页的设计 389

16.2.1效果图的设计 389

16.2.2框架的规划 389

16.2.3布局图片的分离与制作 398

16.2.4框架代码的编写 399

16.2.5内容代码的编写 405

16.2.6 CSS代码的编写 408

16.2.7预览效果及微调 411

附录A CSS标记速查 412

A.1字体属性 412

A.1.1设置字体——font-family 412

A.1.2设置字号——font-size 412

A.1.3字体风格——font-style 412

A.1.4设置加粗字体——font-weight 413

A.1.5小型的大写字母——font-variant 413

A.1.6复合属性：字体——font 413

A.2颜色及背景属性 413

A.2.1颜色属性设置——color 413

A.2.2背景颜色——background-color 414

A.2.3背景图像——background-image 414

A.2.4背景重复——background-repeat 415

A.2.5背景附件——background-attachment 415

A.2.6背景位置——-background-position 415

A.2.7复合属性：背景——background 415

A.3文本属性 416

A.3.1单词间隔——word-spacing 416

A.3.2字符间隔——letter-spacing 416

A.3.3文字修饰——text-decoration 416

A.3.4纵向排列——vertical-align 416

A.3.5文本转换——text-transform 417

A.3.6文本排列——text-align 417

A.3.7文本缩进——text-indent 417

A.3.8文本行高——line-height 417

A.3.9处理空白——white-space 417

A.3.10文本反排——unicode-bidi与direction 418

A.4边距与填充属性 418

A.4.1顶端边距——margin-top 418

A.4.2其他边距——margin-bottom、margin-left、margin-right 419

A.4.3复合属性：边距——margin 419

A.4.4顶端填充——padding-top 419

A.4.5其他填充——padding-bottom、padding-left、padding-right 419

A.4.6复合属性：填充——padding 419

A.5边框属性 419

A.5.1边框样式——border-style 420

A.5.2边框宽度——border-width 421

A.5.3边框颜色——border-color 421

A.5.4边框属性——border 421

A.6定位及尺寸属性 422

A.6.1定位方式——position 422

A.6.2元素位置——top、right、bottom、left 422

A.6.3层叠顺序——z-index 423

A.6.4浮动属性——float 423

A.6.5清除属性——clear 423

A.6.6可视区域——clip 423

A.6.7设定大小——width、height 423

A.6.8超出范围——overflow 424

A.6.9可见属性——visibility 424

A.7列表属性 424

A.7.1列表符号——list-style-type 424

A.7.2图像符号——list-style-image 425

A.7.3列表缩进——list-style-position 425

A.7.4复合属性：列表——list-style 425

A.8光标属性——cursor 425

A.9滤镜属性 426

A.9.1不透明度——alpha 426

A.9.2动感模糊——blur 426

A.9.3对颜色进行透明处理——chroma 427

A.9.4设置阴影——dropShadow 427

A.9.5对象的翻转——flipH、fliPV 427

A.9.6发光效果——glow 427

A.9.7灰度处理——gray 427

A.9.8反相——invert 428

A.9.9X光片效果——Xray 428

A.9.10遮罩效果——mask 428

A.9.11波形滤镜——wave 428