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

第1章 CSS样式设计基础 1

1.1 网页设计需要学什么 1

1.1.1 学习HTML 1

1.1.2 掌握DIV布局 2

1.1.3 学习CSS 2

1.1.4 学习JavaScript 3

1.2 设计良好的结构 4

1.2.1 一个简单的文档必须包含的内容 4

1.2.2 认识标签 5

1.2.3 选用标签 7

1.2.4 使用div和span 7

1.2.5 使用id和class 8

1.2.6 设置文档类型 9

1.2.7 认识显示模式 9

1.3 初识CSS 11

1.3.1 CSS发展历史 11

1.3.2 CSS优势 12

1.3.3 CSS样式 12

1.3.4 应用CSS样式 12

1.3.5 CSS样式表 14

1.3.6 导入样式表 14

1.3.7 CSS注释和格式化 14

1.3.8 设计第一个样式示例 15

1.4 CSS选择器 16

1.4.1 认识CSS选择器 16

1.4.2 标签选择器 16

1.4.3 ID选择器 17

1.4.4 类选择器 18

1.4.5 指定选择器 20

1.4.6 包含选择器 20

1.4.7 子选择器 22

1.4.8 相邻选择器 22

1.4.9 兄弟选择器 23

1.4.10 分组选择器 25

1.4.11 伪选择器 25

1.4.12 属性选择器 26

1.4.13 通用选择器 28

1.5 CSS特性 28

1.5.1 层叠性 28

1.5.2 继承性 29

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

2.1 字体和文本样式基础 30

2.1.1 字体类型 30

2.1.2 字体大小 32

2.1.3 字体颜色 35

2.1.4 字体粗细 35

2.1.5 斜体字体 36

2.1.6 装饰线 37

2.1.7 字体大小写 38

2.1.8 文本水平对齐 39

2.1.9 文本垂直对齐 41

2.1.10 字间距和词间距 42

2.1.11 行高 43

2.1.12 首行缩进 45

2.2 实战案例 47

2.2.1 模拟百度Logo样式 47

2.2.2 定义标题样式 49

2.2.3 定义正文样式 51

2.2.4 设计文本块样式 52

2.2.5 设计新闻版面 55

2.2.6 设计图文版面 59

2.2.7 设计单页版式 63

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

3.1 图片样式基础 66

3.1.1 图片边框 66

3.1.2 图片大小 68

3.1.3 图片对齐 69

3.1.4 半透明图片 71

3.1.5 圆角图片 72

3.1.6 阴影图片 73

3.2 实战案例 75

3.2.1 设计镶边效果 75

3.2.2 设计水印效果 76

3.2.3 图文混排 78

3.2.4 图片布局 81

3.2.5 多图版式 84

3.2.6 圆角栏目 87

3.2.7 设计个人简历1 90

3.2.8 设计个人简历2 94

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

4.1 背景样式基础 98

4.1.1 背景颜色 98

4.1.2 版块配色 99

4.1.3 设置背景图像 103

4.1.4 背景平铺 104

4.1.5 背景定位 106

4.1.6 固定背景 109

4.1.7 定位参考 110

4.1.8 背景裁剪 112

4.1.9 背景大小 113

4.1.10 多背景图 115

4.2 实战案例 116

4.2.1 设计带花纹的网页边框 116

4.2.2 设计圆边页面 121

4.2.3 设计分栏版式 125

4.2.4 设计滑动门菜单 127

4.2.5 设计焦点图 130

第5章 使用CSS定义链接样式 133

5.1 链接样式基础 133

5.1.1 设置链接样式 133

5.1.2 定义下划线样式 134

5.1.3 定义类型标识样式 136

5.1.4 定义按钮样式 137

5.1.5 案例：基本链接样式应用 140

5.2 实战案例 144

5.2.1 鼠标光标样式 144

5.2.2 文档类型提示 147

5.2.3 工具提示样式 148

5.2.4 立体菜单栏 150

5.2.5 设计CSS Sprites导航栏 152

5.2.6 选项卡 156

5.2.7 浏览大图 160

第6章 使用CSS设计列表样式 163

6.1 列表样式基础 163

6.1.1 设置项目符号 163

6.1.2 自定义项目图标 166

6.1.3 定义列表项目的版式 167

6.2 实战案例 168

6.2.1 设计新闻栏目 168

6.2.2 设计导航菜单 172

6.2.3 设计多级菜单 175

6.2.4 设计列表版式 178

6.2.5 使用列表设计图文混排页面 181

6.2.6 设计水平滑动菜单 187

6.2.7 设计垂直滑动菜单 189

6.2.8 设计Tab面板 191

6.2.9 设计下拉式面板 193

第7章 使用CSS设计表格样式 196

7.1 表格样式基础 196

7.1.1 设置表格背景色和前景色 196

7.1.2 设置表格边框 198

7.1.3 设置单元格边距 199

7.1.4 设置表格标题的位置 200

7.1.5 隐藏空单元格 201

7.2 实战案例 202

7.2.1 设计课程表 202

7.2.2 设计通讯录 204

7.2.3 设计月历 208

7.2.4 设计分组表格 212

第8章 使用CSS设计表单样式 218

8.1 表单样式基础 218

8.1.1 定义表单字体样式 218

8.1.2 定义表单边框和边距样式 221

8.1.3 定义表单背景样式 223

8.2 实战案例 226

8.2.1 定义表单样式 226

8.2.2 设计下拉菜单样式 230

8.2.3 设计注册表 231

8.2.4 设计调查表 235

8.2.5 设计反馈表 241

第9章 使用 DIV＋CSS布局网页 245

9.1 CSS盒模型 245

9.1.1 定义边界 245

9.1.2 定义补白 248

9.1.3 定义边框 251

9.1.4 定义尺寸 253

9.2 CSS布局基础 255

9.2.1 定义显示类型 255

9.2.2 定义显示模式 255

9.2.3 网页布局样式 256

9.2.4 设置浮动显示 257

9.2.5 清除浮动 260

9.2.6 浮动嵌套 262

9.2.7 网页布局方法 263

9.3 实战案例 267

9.3.1 网站重构 267

9.3.2 设计两列网页 272

9.3.3 设计三列网页 277

第10章 使用CSS定位 282

10.1 CSS定位基础 282

10.1.1 设置定位显示 282

10.1.2 静态定位 283

10.1.3 绝对定位 283

10.1.4 相对定位 284

10.1.5 固定定位 285

10.1.6 定位包含框 286

10.1.7 设置定位偏移 289

10.1.8 设置层叠顺序 293

10.1.9 层叠上下文 295

10.2 实战案例 297

10.2.1 画册式网页定位 297

10.2.2 展厅式网页定位 301

10.2.3 书签式网页定位 306

第11章 网页版式设计与实战 311

11.1 HTML结构重构 311

11.1.1 设计基本结构 311

11.1.2 SEO结构优化 313

11.2 单列版式 314

11.3 两列版式 316

11.3.1 弹性版式 316

11.3.2 固宽版式 319

11.3.3 混合版式 320

11.4 三列版式 324

11.4.1 弹性版式 324

11.4.2 固宽版式 328

11.4.3 混合版式 329

11.4.4 多列等高 333

11.5 实战案例 336

11.5.1 设计单列固宽网页 336

11.5.2 设计单列弹性框架网页 341

11.5.3 设计两列弹性网页 347

11.5.4 设计三列弹性网页 352

第12章 使用CSS3布局网页 356

12.1 多列流动布局 356

12.1.1 设置列宽 356

12.1.2 设置列数 357

12.1.3 设置列间距 358

12.1.4 设置列边框样式 359

12.1.5 设置跨列显示 360

12.1.6 设置列高度 361

12.2 弹性盒布局 362

12.2.1 定义Flexbox 363

12.2.2 定义伸缩方向 365

12.2.3 定义行数 366

12.2.4 定义对齐方式 368

12.2.5 定义伸缩项目 370

12.3 实战案例 373

12.3.1 比较三种布局方式 373

12.3.2 设计可伸缩网页模板 377

12.3.3 设计多列网页 381

12.3.4 设计HTML5应用网页模板 383

第13章 使用CSS3设计动画 387

13.1 设计2D变换 387

13.1.1 定义旋转 387

13.1.2 定义缩放 388

13.1.3 定义移动 389

13.1.4 定义倾斜 391

13.1.5 定义矩阵 392

13.1.6 定义变换原点 393

13.2 设计3D变换 394

13.2.1 定义位移 395

13.2.2 定义缩放 397

13.2.3 定义旋转 398

13.3 设计过渡动画 401

13.3.1 设置过渡属性 401

13.3.2 设置过渡时间 402

13.3.3 设置延迟时间 402

13.3.4 设置过渡动画类型 403

13.3.5 设置触发方式 404

13.4 设计帧动画 410

13.4.1 设置关键帧 410

13.4.2 设置动画属性 411

13.5 实战案例 414

13.5.1 设计挂图 414

13.5.2 设计高亮显示 415

13.5.3 设计3D几何体 416

13.5.4 设计旋转的盒子 419

13.5.5 设计可折叠面板 421

13.5.6 设计翻转广告 422

13.5.7 设计跑步动画 424

第14章 设计可响应的移动网页 426

14.1 响应式设计基础 426

14.1.1 响应式设计流程 426

14.1.2 设计响应式图片 427

14.1.3 定义媒体类型 429

14.1.4 使用＠media 430

14.1.5 在＜link＞中定义媒体查询 433

14.1.6 设计响应式布局 437

14.2 实战案例 441

14.2.1 根据设备控制显示内容 441

14.2.2 设计伸缩菜单 444

14.2.3 设计可响应网页模板 446

14.2.4 设计响应式网站首页 448

第15章 使用JavaScript控制CSS样式 452

15.1 在网页中使用JavaScript 452

15.1.1 使用＜script＞标签 452

15.1.2 脚本位置 454

15.1.3 延迟执行 455

15.1.4 异步响应 456

15.1.5 脚本样式与CSS样式 457

15.2 获取网页对象 458

15.2.1 获取元素 458

15.2.2 使用CSS选择器 460

15.2.3 遍历DOM节点 461

15.2.4 遍历元素 462

15.3 操作类样式 464

15.3.1 获取类样式 464

15.3.2 添加类样式 465

15.3.3 删除类样式 466

15.4 读写行内样式 467

15.4.1 CSS脚本特性 467

15.4.2 使用style对象 468

15.5 读写样式表中样式 473

15.5.1 使用styleSheets对象 474

15.5.2 访问样式 475

15.5.3 读取选择符 477

15.5.4 编辑样式 478

15.5.5 添加样式 479

15.5.6 读取最终样式 480

15.6 获取尺寸 483

15.6.1 获取对象大小 483

15.6.2 获取可视区域大小 484

15.6.3 获取偏移大小 487

15.6.4 获取窗口大小 488

15.7 获取位置 489

15.7.1 获取偏移位置 489

15.7.2 获取相对位置 491

15.7.3 获取定位位置 492

15.7.4 获取鼠标指针位置 492

15.7.5 获取鼠标指针相对位置 493

15.7.6 获取滚动条位置 495

15.8 设置位置 495

15.8.1 设置偏移位置 495

15.8.2 设置相对位置 496

15.8.3 设置滚动条位置 497

15.9 显示 497

15.9.1 可见性 497

15.9.2 透明度 498

15.10 实战案例 499

15.10.1 使用定时器 499

15.10.2 设计运动 502

15.10.3 设计渐变 503

15.10.4 设计换肤 504

第16章 使用CSS设计XML文档样式 507

16.1 XML样式基础 507

16.1.1 XML文档结构 507

16.1.2 嵌入CSS样式 509

16.1.3 使用CSS样式表 510

16.2 实战案例 512

16.2.1 设计特效文字 512

16.2.2 设计表格样式 513

16.2.3 设计图文页面 516

16.2.4 设计正文版面 517