CSS+DIV网页样式与布局从入门到精通PDF电子书下载

第1章 CSS样式设计基础 1

1.1设计良好的网页结构 2

1.1.1选用符合语义的标签 2

1.1.2文档类型和浏览器模式 7

1.2初识CSS 8

1.2.1为什么学习CSS 9

1.2.2 CSS基本语法 9

1.2.3设计第一个实例 10

1.3 CSS选择器 12

1.3.1 CSS选择器概述 12

1.3.2标签选择器 13

1.3.3 ID选择器 14

1.3.4类选择器 16

1.3.5伪类和伪对象选择器 17

1.3.6子选择器 19

1.3.7相邻选择器 20

1.3.8属性选择器 21

1.3.9通用选择器 23

1.3.10包含选择器 23

1.3.11分组选择器 25

1.3.12指定选择器 26

1.4 CSS基本特性 26

1.4.1层叠和特殊性 26

1.4.2继承 31

1.5样式表规划、组织和维护 32

1.5.1对文档应用样式 32

1.5.2对代码进行注释 34

1.5.3样式文档 37

1.5.4组织样式表以便简化维护 37

1.6 CSS属性和属性值 38

1.6.1 CSS属性 38

1.6.2 CSS单位 44

1.6.3设置颜色 46

第2章 使用CSS设置字体和文本样式 48

2.1字体和文本样式基础 49

2.1.1定义字体类型 49

2.1.2定义字体大小 51

2.1.3定义字体颜色 53

2.1.4定义字体粗细 54

2.1.5定义斜体字体 55

2.1.6定义下划线、删除线和顶划线 56

2.1.7定义字体大小写 57

2.1.8定义文本对齐 58

2.1.9定义垂直对齐 60

2.1.10定义字间距和行间距 63

2.1.11定义行间距 64

2.1.12定义缩进 67

2.2案例实战 68

2.2.1设计百度Logo 69

2.2.2设置标题样式 70

2.2.3设置正文样式 73

2.2.4设置文本样式 75

2.2.5设置文本段样式 79

2.2.6设置段落版式样式 82

2.2.7设计单页图文混排版式 86

第3章 使用CSS设置图片样式 92

3.1图片样式设置基础 93

3.1.1定义图片边框 93

3.1.2定义图片大小 97

3.1.3定义图片的横向对齐 98

3.1.4定义图片的纵向对齐 99

3.1.5设置文字环绕效果 101

3.2案例实战 103

3.2.1图文混排 103

3.2.2图片布局 107

3.2.3多图排列 111

3.2.4阴影图片 114

3.2.5圆角图片 116

3.2.6设计圆角栏目 118

第4章 使用CSS控制背景图像 124

4.1背景样式设置基础 125

4.1.1设置页面背景颜色 125

4.1.2设置背景颜色给页面分块 126

4.1.3定义背景图片 128

4.1.4背景图片的重复 130

4.1.5定义背景图片的位置 131

4.1.6固定背景图片 133

4.2案例实战 134

4.2.1设置网页背景颜色 135

4.2.2设置带花纹边框 136

4.2.3设置永远固定的背景 143

4.2.4设置圆润的栏目模块 144

4.2.5设计分栏版式 149

4.2.6设计滑动门菜单 151

4.2.7设计灯箱广告 154

4.2.8设计博客首页效果 157

第5章 使用CSS控制列表样式 163

5.1列表样式设置基础 164

5.1.1设置列表项符号 164

5.1.2定义项目的图片符号 166

5.1.3列表的横竖转换 167

5.2案例实战 169

5.2.1设计新闻栏目 169

5.2.2设计导航菜单 173

5.2.3设计多级菜单 177

5.2.4列表排版的应用 182

5.2.5使用列表实现图文混排效果 186

第6章 使用CSS设计表格样式 192

6.1表格样式设置基础 193

6.1.1设置表格颜色 193

6.1.2设置表格边框 194

6.2案例实战 196

6.2.1美化表格 197

6.2.2设计高效的表格 200

6.2.3让表格更易用 204

6.2.4表格布局 207

第7章 使用CSS设计表单样式 211

7.1表单样式设置基础 212

7.1.1表单基本结构 212

7.1.2设置基本样式 216

7.1.3定义字体样式 221

7.1.4定义边框样式 222

7.1.5定义背景样式 224

7.2案例实战 228

7.2.1设计多彩下拉菜单样式 228

7.2.2设计注册表单 230

7.2.3设计调查表 235

7.2.4设计反馈表 240

第8章 使用CSS定义链接样式 246

8.1链接样式设置基础 247

8.1.1设置链接样式 247

8.1.2设计下划线样式 248

8.1.3设置类型指示样式 249

8.1.4定义按钮样式 251

8.1.5定义已访问样式 254

8.1.6链接提示样式 254

8.2案例实战 256

8.2.1鼠标样式 256

8.2.2设计菜单样式 259

8.2.3设计苹果导航菜单 261

8.2.4块状选项卡 266

8.2.5图片浏览 271

第9章 网页排版和DIV+CSS布局 275

9.1 CSS盒模型 276

9.1.1认识盒模型 276

9.1.2外边距 278

9.1.3内边距 281

9.1.4边框 284

9.1.5宽和高 284

9.2网页重构 287

9.2.1设置文档类型 287

9.2.2选择标签 293

9.2.3案例实战：尝试重构禅意花园 296

9.3网页排版 299

9.3.1网页排版基本原则 299

9.3.2标准网页版式基本形式 300

9.3.3网页排版基本方法 300

9.4 DIV+CSS布局 305

9.4.1布局空间 305

9.4.2布局位置 307

9.4.3布局环绕 309

9.4.4清除浮动 311

9.4.5布局嵌套 313

9.4.6调整布局间距 316

9.5案例实战 321

9.5.1两列布局 322

9.5.2三列布局 327

第10章 用CSS定位控制网页布局 332

10.1 CSS定位 333

10.1.1认识position 333

10.1.2静态定位 333

10.1.3绝对定位 334

10.1.4相对定位 335

10.1.5固定定位 338

10.2定位参照 339

10.2.1参照对象 339

10.2.2坐标值 343

10.2.3定位的特殊性 344

10.3定位层叠 347

10.3.1层叠顺序 347

10.3.2嵌套层叠顺序 349

10.3.3 CSS层叠框 351

10.3.4 CSS层叠常见问题 354

10.4案例实战 357

10.4.1画册式网页布局 357

10.4.2展览式网页布局 361

10.4.3浪漫式网页布局 366

第11章 解决CSS设计中的常见问题 372

11.1 IE条件语句 373

11.1.1认识IE条件语句 373

11.1.2 IE条件语句基本用法 374

11.1.3案例实战：设计兼容的多级菜单 376

11.2 CSS渲染及问题 380

11.2.1开启和关闭IE布局特性 381

11.2.2设置Layout特性的方法 381

11.2.3问题1：不能自动展开包含框 384

11.2.4问题2：包含浮动布局的问题与处理 387

11.2.5问题3：相邻浮动布局的问题与处理 389

11.2.6问题4：列表布局的问题与处理 390

11.2.7问题5：定位布局的问题与处理 392

11.3常用浏览器解析问题和解决方法 394

11.3.1兼容IE6版本浏览器 395

11.3.2兼容IE5系列版本浏览器 396

11.3.3兼容IE7版本浏览器 398

11.3.4兼容FF等标准浏览器 399

11.3.5问题1：超链接的Bug 399

11.3.6问题2：内容与背景分离的Bug 400

11.3.7问题3： IE6躲躲猫Bug 402

11.3.8问题4： IE6多余字符Bug 403

11.4案例实战 403

11.4.1 3列等高布局 403

11.4.2 3列浮动布局 408

第12章 旅游酒店网站 410

12.1网站页面效果分析 411

12.1.1“旅游度假”页面效果分析 411

12.1.2“预定酒店”页面效果分析 411

12.2首页策划设计 412

12.3网页设计与重构 414

12.3.1画草图和设计图 414

12.3.2切图 417

12.3.3主体重构 419

12.4页面布局 422

12.4.1设计页面基本样式 422

12.4.2设计页头布局和样式 422

12.4.3设计搜索和幻灯区布局和样式 425

12.4.4设计左侧引导区布局和样式 427

12.4.5设计内容区样式 428

12.4.6设计右侧专题栏样式 431

第13章 新闻网站 434

13.1网站页面效果分析 435

13.1.1“对话”页面效果分析 435

13.1.2环球看点页面效果分析 435

13.2首页策划设计 436

13.3网页设计与重构 438

13.3.1画草图和设计图 438

13.3.2切图 440

13.3.3主体重构 442

13.4页面布局 444

13.4.1设计页面基本样式 445

13.4.2设计页头布局和样式 445

13.4.3设计主要新闻区布局和样式 447

13.4.4设计分类新闻区布局和样式 450

第14章 使用JavaScript控制CSS样式 455

14.1 JavaScript基础 456

14.1.1在网页中嵌入JavaScript脚本 456

14.1.2 JavaScript脚本在文档中的位置 457

14.1.3解决JavaScript脚本与CSS样式冲突 457

14.2 CSS脚本化传统控制方法 459

14.2.1认识Style对象 460

14.2.2读写行内样式 464

14.2.3读写样式表中样式 467

14.2.4访问网页实际样式 472

14.3控制CSS脚本的标准方法 473

14.3.1 CSSStyleSheet接口 474

14.3.2 CSSStyleRule接口 474

14.3.3 CSSStyleDeclaration接口 475

14.4使用JavaScript控制元素大小 476

14.4.1读取元素的长宽样式值 476

14.4.2使用offsetWidth和offsetHeight属性读取元素的尺寸 479

14.4.3读取复杂结构中的元素尺寸 481

14.4.4读取浏览器窗口大小 485

14.5使用JavaScript定位 486

14.5.1在窗口中的位置 487

14.5.2相对父元素的位置 489

14.5.3相对包含块的位置 489

14.5.4定义偏移位置 490

14.5.5定义相对位置 490

14.5.6确定光标位置 491

14.5.7确定光标的相对位置 492

14.5.8确定滚动条的位置 493

14.5.9定义滚动条的位置 493

14.6使用JavaScript设置显隐效果 494

14.6.1设置显隐效果 494

14.6.2设置透明度 495

14.6.3控制动画时长 496

14.6.4设计滑动效果 499

第15章 使用CSS设计XML文档样式 502

15.1 XML基础 503

15.1.1 XML文档基本结构 503

15.1.2声明 504

15.1.3处理指令 504

15.1.4注释 505

15.1.5标签 505

15.1.6属性 506

15.2设置XML文档样式 507

15.2.1 CSS样式表 507

15.2.2 XSL样式表 508

15.3 CSS与XML文档关联 510

15.3.1直接嵌入CSS样式 510

15.3.2导入外部CSS样式表文件 512

15.3.3＠import 513

15.4案例实战 513

15.4.1设计诗情画意图文效果 513

15.4.2设计新闻版面效果 515

第16章 使用CSS滤镜 519

16.1 CSS滤镜概述 520

16.1.1基本用法 520

16.1.2恰当选用滤镜 520

16.2常用CSS滤镜 521

16.2.1通道（Alpha ） 521

16.2.2模糊（Blur） 523

16.2.3运动模糊（MotionBlur） 524

16.2.4透明色（Chroma） 525

16.2.5翻转（Flip） 527

16.2.6光晕（Glow） 528

16.2.7灰度（Gray） 529

16.2.8反色（Invert ） 530

16.2.9遮罩（Mask） 531

16.2.10阴影（Shadow ） 532

16.2.11 X射线（Xray） 534

16.2.12浮雕（Emboss ） 535

16.2.13波浪（Wave） 536

16.3案例实战 537