CSS3网页设计从入门到精通PDF电子书下载

第1章 CSS3设计概述 1

1.1 认识CSS 2

1.1.1 CSS的发展历史 2

1.1.2 CSS页面优势 2

1.1.3 CSS在国内的早期实践 3

1.2 认识Web标准 5

1.2.1 网页结构 5

1.2.2 网页表现 5

1.2.3 网页行为 6

1.3 案例：初次体验CSS 6

1.4 CSS3简介 9

1.4.1 CSS3模块 9

1.4.2 CSS3新特性 10

1.4.3 CSS3现状 12

1.4.4 给初学者的建议 14

1.4.5 浏览器支持 15

1.5 案例：设计完整的CSS页面 17

第2章 CSS3基本语法 21

2.1 CSS基本用法 22

2.1.1 CSS样式 22

2.1.2 CSS应用 23

2.1.3 CSS样式表 29

2.1.4 导入外部样式表 30

2.1.5 CSS注释 31

2.2 设置属性 32

2.2.1 CSS属性 32

2.2.2 定义属性值 33

2.3 CSS特性 36

2.3.1 CSS层叠性 36

2.3.2 CSS继承性 41

2.3.3 案例实战 42

2.4 默认样式 45

2.4.1 HTML4默认样式 45

2.4.2 浏览器默认样式 47

第3章 CSS3选择器 49

3.1 选择器概述 50

3.1.1 为什么学习CSS3选择器 50

3.1.2 CSS3选择器分类 50

3.2 基本选择器 53

3.2.1 标签选择器 53

3.2.2 类选择器 54

3.2.3 ID选择器 58

3.3 组合选择器 59

3.3.1 包含选择器 60

3.3.2 子选择器 61

3.3.3 相邻选择器 63

3.3.4 兄弟选择器 64

3.3.5 分组选择器 65

3.4 属性选择器 67

3.4.1 认识属性选择器 67

3.4.2 案例：设计图片灯箱导航按钮 71

3.4.3 案例：设计联系表单 75

3.4.4 案例：设计超链接样式 78

3.5 伪类选择器 80

3.5.1 认识伪类选择器 80

3.5.2 动态伪类 83

3.5.3 结构伪类 86

3.5.4 否定伪类 93

3.5.5 状态伪类 95

3.5.6 目标伪类 98

3.6 综合实战：设计优雅的表格 98

第4章 网页文本美化 103

4.1 定义字体样式 104

4.1.1 设置字体类型 104

4.1.2 使用通用字体 105

4.1.3 设置字体大小 106

4.1.4 案例：灵活配置网页字体大小 108

4.1.5 设置字体颜色 110

4.1.6 案例：网页配色 111

4.1.7 设置字体字形 113

4.2 定义文本样式 115

4.2.1 文本水平对齐 115

4.2.2 案例：网页居中显示 116

4.2.3 案例：左右对齐栏目 118

4.2.4 文本垂直对齐 119

4.2.5 案例：设计绝对居中显示 121

4.2.6 案例：优化网页居中显示 122

4.2.7 设置行高 123

4.2.8 案例：设计可阅读的正文行高 123

4.2.9 案例：灵活设计行高 124

4.2.10 案例：设计首行缩进 126

4.2.11 综合案例：文字隐藏和截取 128

4.3 CSS3文本样式 131

4.3.1 CSS3文本模块概述 131

4.3.2 设计文本阴影 135

4.3.3 案例：巧用文本阴影 137

4.3.4 案例：设计网站首页 143

4.3.5 案例：定义溢出文本 145

4.3.6 案例：文本换行 147

4.3.7 案例：添加动态内容 150

4.3.8 恢复默认样式 152

4.3.9 自定义字体类型 153

第5章 网页色彩和图像美化 155

5.1 定义颜色 156

5.1.1 使用RGBA 156

5.1.2 使用HSL 157

5.1.3 使用HSLA 160

5.1.4 定义opacity属性 161

5.1.5 定义transparent颜色值 164

5.2 定义渐变色 165

5.2.1 设计Webkit渐变 165

5.2.2 案例：应用渐变色1 170

5.2.3 设计Gecko渐变 172

5.2.4 案例：应用渐变色2 177

5.2.5 设计IE渐变 179

5.2.6 设计W3C渐变 180

5.2.7 案例：设计精致按钮 181

5.3 图像美化 183

5.3.1 案例：定义照片相框 183

5.3.2 案例：为图像设计阴影白边效果 184

5.3.3 案例：设计水印 186

5.4 图文混排 188

5.4.1 案例：行内图文混排 188

5.4.2 案例：设计图文环绕版式 190

5.4.3 案例：设计不规则的图文环绕版式 192

5.5 案例实战 195

5.5.1 设计网页纹理背景 195

5.5.2 设计发光的球体 197

5.5.3 设计过渡色谱表 197

第6章 网页背景和边框美化 200

6.1 设计边框样式 201

6.1.1 定义多色边框 201

6.1.2 定义边框背景 204

6.2 设计圆角 210

6.2.1 使用border-radius 210

6.2.2 案例：设计椭圆图形 214

6.3 设计倒影 215

6.4 设计阴影 218

6.4.1 使用box-shadow 218

6.4.2 案例：设计Windows界面效果 222

6.5 设计背景图像 226

6.5.1 定义背景图像重复显示 226

6.5.2 案例：设计弹性公告栏 228

6.5.3 定位背景图像 229

6.5.4 固定背景图像 231

6.5.5 案例：使用背景图像设计圆角 232

6.5.6 案例：伪列布局 236

6.6 CSS3新增背景图像属性 242

6.6.1 定义坐标 243

6.6.2 定义裁剪区域 245

6.6.3 定义大小 248

6.6.4 定义循环方式 249

6.6.5 定义多背景图 250

6.7 案例实战 251

6.7.1 设计图标按钮 251

6.7.2 设计花边框 253

6.7.3 设计立体文本框 254

第7章 设计表格和表单 257

7.1 设计表格 258

7.1.1 定义表格 258

7.1.2 优化表格 260

7.1.3 设置表格属性 264

7.2 定义表格样式 266

7.2.1 案例：隔行分色 266

7.2.2 案例：分栏样式 267

7.2.3 案例：鼠标交互样式 268

7.3 设计表单 270

7.4 定义表单样式 272

7.4.1 设置基本样式 272

7.4.2 案例：设计高亮表单 275

7.4.3 案例：设计图标化表单 277

7.4.4 案例：设计易用表单 278

7.4.5 案例：设计反馈表 281

第8章 设计链接、列表和菜单 287

8.1 设计超链接 288

8.1.1 定义基本样式 288

8.1.2 案例：设计多样超链接 290

8.1.3 案例：设计按钮样式 292

8.1.4 案例：设计图像化样式 294

8.1.5 案例：设计滑动样式 296

8.2 设计列表 297

8.2.1 列表类型 297

8.2.2 正确使用列表 298

8.3 定义列表样式 302

8.3.1 重置列表样式 302

8.3.2 定义项目符号 304

8.3.3 案例：自定义项目符号 306

8.3.4 案例：设计并列显示的列表 307

8.3.5 案例：定位列表项目 310

8.3.6 案例：设计导航列表 311

8.4 设计导航条 313

8.4.1 案例：使用背景图设计导航条 314

8.4.2 案例：设计垂直导航条 316

8.4.3 案例：设计水平导航条 318

8.4.4 案例：设计多级菜单 321

8.4.5 案例：设计滑动门菜单 324

8.5 综合案例 326

8.5.1 排行榜 326

8.5.2 图文列表 328

第9章 CSS盒模型 332

9.1 CSS2盒模型概述 333

9.1.1 盒模型缘起 333

9.1.2 盒模型结构 333

9.1.3 定义盒模型大小 335

9.2 边框 337

9.2.1 定义宽度 338

9.2.2 定义颜色 338

9.2.3 定义样式 339

9.2.4 案例：设计行内元素边框 342

9.3 边界 344

9.3.1 定义边界 344

9.3.2 案例：边界的应用 344

9.3.3 案例：边界重叠现象 349

9.3.4 行内元素边界 354

9.4 补白 354

9.5 CSS3盒模型 357

9.5.1 定义盒模型显示方式 357

9.5.2 定义盒模型可控大小 358

9.5.3 溢出处理 359

9.5.4 定义轮廓 361

9.5.5 定义轮廓样式 364

9.5.6 案例：改善网页布局 367

第10章 CSS布局基础 371

10.1 盒模型高级概念 372

10.1.1 显示类型 372

10.1.2 定位框 374

10.2 CSS布局概述 376

10.3 流动布局 379

10.3.1 流动元素 379

10.3.2 相对定位元素 380

10.4 浮动布局 382

10.4.1 定义浮动显示 382

10.4.2 清除浮动 385

10.4.3 浮动嵌套 387

10.4.4 案例：混合浮动布局 389

10.5 定位布局 393

10.5.1 定义定位显示 393

10.5.2 相对定位 396

10.5.3 定位层叠 397

10.5.4 案例：混合定位布局 398

10.6 案例实战 400

10.6.1 设计固宽＋弹性页面 400

10.6.2 设计两栏弹性页面 402

10.6.3 设计两栏浮动页面 403

10.6.4 设计3栏弹性页面 404

10.6.5 设计两列固宽＋单列弹性页面 407

10.6.6 设计两列弹性＋单列固定页面 409

第11章 CSS3布局 411

11.1 多列布局 412

11.2 定义名列样式 413

11.2.1 设置列宽 413

11.2.2 设置列数 415

11.2.3 设置列间距 416

11.2.4 设置列边框样式 417

11.2.5 设置跨列显示 419

11.2.6 设置列高度 420

11.2.7 设置打印列 422

11.3 盒布局 423

11.4 定义盒布局样式 427

11.4.1 设置自适应宽度 427

11.4.2 设置列显示顺序 429

11.4.3 设置列排列方向 431

11.4.4 设置模块大小自适应 433

11.4.5 消除空白 435

11.4.6 设置对齐方式 438

11.4.7 小结 440

11.5 伸缩盒布局 440

11.5.1 定义Flexbox 440

11.5.2 定义伸缩方向 442

11.5.3 定义行数 443

11.5.4 定义对齐方式 445

11.5.5 定义伸缩项目 447

11.5.6 案例：设计伸缩盒菜单 450

11.5.7 案例：设计自适应伸缩页 452

11.5.8 案例：设计混合版伸缩页面 454

11.6 案例实战 458

11.6.1 设计多列首页 458

11.6.2 设计HTML5应用文档 461

11.6.3 设计Windows 8桌面 464

第12章 CSS兼容技法 470

12.1 了解主流浏览器 471

12.1.1 Mozilla 471

12.1.2 IE 471

12.1.3 Safari 471

12.1.4 Opera 471

12.1.5 Chrome 471

12.1.6 国内浏览器市场份额 471

12.1.7 IETester 472

12.2 CSS兼容方法 473

12.2.1 CSS过滤器 473

12.2.2 显示模式 474

12.3 过滤样式表 476

12.4 过滤样式 478

12.4.1 ！important 478

12.4.2 下划线属性名 479

12.4.3 ＊html选择符 479

12.5 过滤声明 479

12.5.1 隐藏单个声明 480

12.5.2 隐藏多个声明 480

12.5.3 推荐过滤器 481

12.6 使用检测工具 482

12.6.1 W3C CSS验证服务 482

12.6.2 Web Developer 483

12.6.3 代码隔离与验证 484

12.7 案例实战 485

12.7.1 双倍显示 485

12.7.2 多出3像素 485

12.7.3 高度不适应 487

12.7.4 多余字符 488

12.7.5 定位异常 489

12.7.6 捉迷藏 490

12.7.7 百分比取值 491

12.7.8 丢失项目符号 492

12.7.9 内容溢出 493

第13章 CSS文档统筹与编码规范 496

13.1 CSS文档统筹 497

13.1.1 根据页面类型分离文件 497

13.1.2 根据功能模块分离文件 497

13.1.3 根据标签类型分离文件 497

13.1.4 根据设备类型分离文件 498

13.1.5 根据代码规模分离文件 498

13.2 规则组织 498

13.3 属性组织 501

13.3.1 按字母顺序组织 501

13.3.2 按主次关系组织 501

13.3.3 按优先定义组织 502

13.4 CSS命名艺术 502

13.4.1 经典命名三法 502

13.4.2 CSS命名规则 503

13.4.3 CSS命名方法 504

13.5 CSS代码缩写 506

13.5.1 盒模型代码简写 507

13.5.2 列表和背景缩写 508

13.5.3 颜色值缩写 509

13.5.4 字体缩写 510

13.6 CSS代码格式 510

13.6.1 CSS代码常用格式 510

13.6.2 CSS代码格式工具 513

13.7 CSS代码注释 514

13.7.1 写好注释 514

13.7.2 预防Bug 515

13.7.3 CSS注释清除 516

13.8 CSS代码优化 517

13.8.1 利用继承性优化代码 517

13.8.2 利用默认值优化代码 518

13.8.3 利用公共类优化代码 518

13.8.4 利用选择符分组优化代码 519

13.8.5 利用层叠覆盖优化代码 519

第14章 CSS3动画 521

14.1 认识Transform 522

14.2 2D变形 524

14.2.1 旋转 524

14.2.2 缩放 525

14.2.3 移动 527

14.2.4 倾斜 528

14.2.5 矩阵 529

14.2.6 案例：设计挂图 531

14.2.7 定义变形原点 533

14.2.8 案例：渐变变形 535

14.3 3D变形 537

14.3.1 位移 538

14.3.2 缩放 540

14.3.3 旋转 541

14.3.4 矩阵 544

14.3.5 倾斜 544

14.3.6 案例：设计旋转的盒子 544

19.2 设计响应式图片 734

19.3 定义设备类型 736

19.3.1 Media Queries模块概述 737

19.3.2 认识＠media规则 738

19.3.3 使用＠media规则 739

19.3.4 案例：设计响应式页面 741

19.4 设计响应式布局 745

19.5 自适应显隐控制 749

19.6 综合案例：设计响应式页面 753

第20章 CSS动态样式 758

20.1 认识LESS 759

20.1.1 LESS概述 759

20.1.2 LESS优势 759

20.1.3 LESS参考和工具 760

20.2 如何使用LESS 762

20.2.1 在客户端使用LESS 762

20.2.2 在服务器端使用LESS 766

20.3 LESS组成 771

20.3.1 LESS基本特性 771

20.3.2 LESS主要功能 774

20.3.3 比较LESS和SASS 775

20.4 LESS动态语法 776

20.4.1 变量 776

20.4.2 混合 777

20.4.3 参数混合 777

20.4.4 模式匹配 779

20.4.5 条件表达式 782

20.4.6 嵌套规则 785

20.4.7 运算 786

20.4.8 Color函数 787

20.4.9 Math函数 788

20.4.10 作用域 789

20.4.11 命名空间 789

20.4.12 注释 791

20.4.13 导入 791

20.4.14 字符串插值 791

20.4.15 转义字符 791

20.4.16 JavaScript表达式 792

20.5 综合案例：在Bootstrap 3中使用LESS 793

第21章 企业＆公司类型网站 796

21.1 产品策划 797

21.2 设计图 798

21.3 切图 800

21.4 网站重构 802

21.5 网站布局 805

第22章 旅游休闲类型网站 817

22.1 产品策划 818

22.2 设计图 818

22.3 切图 821

22.4 网站重构 825

22.5 网站布局 827

第23章 时尚娱乐类型网站 839

23.1 产品策划 840

23.2 设计图 841

23.3 切图 844

23.4 网站重构 846

23.5 网站布局 848

第24章 新闻咨询类型网站 860

24.1 产品策划 861

24.2 设计图 861

24.3 切图 864

24.4 网站重构 867

24.5 网站布局 869