新手学DIV+CSS商业网站布局从入门到精通 实战案例版PDF电子书下载

第1章 初学者必知的常识 2

1.1 回眸Web标准发展之路 2

1.1.1 第一个吃螃蟹的是谁？ 2

1.1.2 设计师的表格情结 2

1.1.3 归去来兮 3

1.1.4 传统布局与标准布局比较 5

1.1.5 网页设计前瞻 8

1.2 Web标准：开发者必知技术规范 9

1.2.1 网页结构 9

1.2.2 网页布局 10

1.2.3 网页行为 10

1.3 CSS布局的基本思路 10

1.3.1 语义含义与实例解释 11

1.3.2 给网页设计师推荐的网站：CSS禅意花园 11

1.3.3 CSS布局的基本思路及实例 12

1.4 CSS其实不难 14

1.5 制作第一个XHTML+CSS页面 15

第2章 CSS语言基础1 22

2.1 认识CSS 22

2.1.1 为什么学习CSS 22

2.1.2 编辑简单的CSS样式 23

2.1.3 编辑简单CSS样式具体操作步骤 23

2.1.4 CSS与浏览器 25

2.1.5 CSS样式表文件 26

2.1.6 CSS注释 27

2.2 CSS类型 28

2.2.1 行内样式解释及实例展示 28

2.2.2 内嵌式解释及实例展示 30

2.2.3 链接式解释及实例展示 33

2.2.4 导入样式解释及实例展示 34

2.2.5 各种方式的优先级实例展示 35

2.3 CSS样式结构 36

2.4 CSS基本选择器 37

2.4.1 标记选择器解释与实例展示 37

2.4.2 类别选择器解释与实例展示 39

2.4.3 ID选择器解释与实例展示 43

第3章 CSS语言基础2 46

3.1 复合选择器 46

3.1.1 包含选择器解释及实例展示 46

3.1.2 子选择器解释及实例展示 48

3.1.3 相邻选择器解释及实例展示 50

3.1.4 属性选择器解释及实例展示 51

3.1.5 伪选择器解释及实例展示 55

3.1.6 集体声明解释及实例展示 57

3.2 层叠与继承 59

3.2.1 CSS的层叠性应用实例解析 59

3.2.2 层叠性实例测试具体操作步骤 62

3.2.3 CSS的继承性图解及实例 63

3.2.4 CSS继承与层叠的运用实例 64

第4章 XHTML重构基础 69

4.1 认识网页结构 69

4.1.1 XHTML文档 69

4.1.2 定义文档类型 70

4.1.3 DTD文档类型 70

4.1.4 声明命名空间 70

4.1.5 XHTML语法 71

4.1.6 XHTML元素 72

4.1.7 XHTML常用结构元素：div 73

4.1.8 XHTML常用结构元素：span 74

4.1.9 XHTML常用结构元素：h1、h2、h3、h4、h5和h6 74

4.1.10 XHTML常用结构元素：p 75

4.1.11 XHTML常用结构元素：ul、ol、li、dl、dt和dd 75

4.1.12 XHTML常用结构元素：table、tr和td 76

4.1.13 把握XHTML结构的语义性 76

4.1.14 构建语义化页面操作 77

4.1.15 案例实战：构建一个符合语义的页面结构 78

4.2 DIV和Span应用 80

4.2.1 比较DIV和Span 80

4.2.2 案例实战：使用DIV 83

4.2.3 案例实战：DIV嵌套 86

4.2.4 案例实战：使用Span 89

4.3 ID和Class应用 91

4.3.1 使用ID 91

4.3.2 比较ID和Name 93

4.3.3 使用Class 95

4.3.4 比较ID和Class 97

第5章 CSS基本模型 100

5.1 认识CSS盒模型 100

5.1.1 为什么要提出盒模型 100

5.1.2 盒模型结构模拟 101

5.1.3 盒模型的宽和高 102

5.1.4 盒模型并列间距 105

5.1.5 盒模型垂直间距 108

5.1.6 空盒模型 111

5.2 盒模型的边框 112

5.2.1 定义边框宽度 113

5.2.2 定义边框颜色 113

5.2.3 定义边框样式 114

5.2.4 分析内联元素的边框 117

5.3 盒模型的外部空隙 119

5.3.1 恰当选择边界值 119

5.3.2 警惕元素边界重叠 125

5.3.3 内联元素的边界 131

5.4 盒模型的内部空隙 132

5.5 IE解析与盒模型的误解 135

5.5.1 IE6元素浮动时边界错位 135

5.5.2 让父元素自适应子元素高度 136

5.5.3 IE6子元素底边界不被解析 137

5.5.4 IE6的子元素溢出 138

第6章 CSS布局基础和实践 142

6.1 进一步理解盒模型 142

6.1.1 盒模型的显示类型 142

6.1.2 盒模型的特殊性：包含块 145

6.1.3 构建XHTML代码模块 145

6.1.4 包含块的嵌套和实例 147

6.1.5 IE浏览器在解析多层包含时出现的问题 148

6.2 CSS布局模型概述 149

6.2.1 流动模型 150

6.2.2 层模型 150

6.2.3 浮动模型 150

6.3 流动模型详解及其应用 151

6.3.1 流动布局基本特征 151

6.3.2 相对定位流动 153

6.4 浮动模型详解及其应用 156

6.4.1 浮动布局5个基本特征与实例解析 156

6.4.2 清除浮动 161

6.4.3 浮动嵌套 165

6.4.4 混合嵌套 166

6.4.5 实战混合布局：调整左右栏之间的空隙 168

6.4.6 实战混合布局之调整上下栏之间的空隙 172

6.4.7 深入混合布局 177

6.5 层模型详解及其应用 182

6.5.1 认识网页定位 182

6.5.2 定位参照坐标 183

6.5.3 定位的边距 187

6.5.4 相对定位 189

6.5.5 案例实战：混合定位 190

6.5.6 定位元素层叠 191

6.6 布局实战：高度自适应 195

6.7 布局实战：伪列布局 198

6.7.1 设计思路 198

6.7.2 设计方法 199

第7章 设计更安全的CSS 203

7.1 关于网页浏览器 203

7.1.1 Mozilla系列浏览器 203

7.1.2 IE内核浏览器 204

7.1.3 Safari内核浏览器 204

7.1.4 Opera内核浏览器 204

7.1.5 Chrome内核浏览器 204

7.1.6 国内浏览器市场行情 204

7.1.7 多版本IE测试实现 205

7.2 认识CSS安全中的几个概念 205

7.2.1 什么是CSS Hack 205

7.2.2 设计CSS Hack和Filter方法 206

7.2.3 CSS Filters技术汇总占点 206

7.2.4 显示模式 208

7.3 过滤样式表 210

7.3.1 IE条件语句 211

7.3.2 @import规则 212

7.4 过滤样式 214

7.4.1 !important 214

7.4.2 下画线属性名 215

7.4.3 转义属性名 215

7.4.4 *html选择符 216

7.4.5 属性选择符 216

7.4.6 子对象选择符 217

7.4.7 相邻选择符 217

7.4.8 转义选择符 217

7.4.9 注释反斜杠 218

7.5 隐藏样式 218

7.5.1 隐藏单个声明 218

7.5.2 隐藏多个声明 220

7.5.3 隐藏规则 220

7.5.4 IE7＋浏览器不支持的过滤器 221

7.5.5 推荐使用的过滤器 222

7.6 网页不兼容怎么办 223

7.6.1 W3C CSS验证服务 223

7.6.2 Web Developer工具插件 225

7.6.3 代码隔离与验证 226

7.7 常见网页设计问题与修复 227

7.7.1 盒模型错误 227

7.7.2 双倍显示错误 228

7.7.3 多出3像素错误 228

7.7.4 高度不适应问题 231

7.7.5 多余字符错误 233

7.7.6 定位错误 234

7.7.7 捉迷藏问题 235

7.7.8 部分区域丢失 237

7.7.9 百分比计算错误 239

7.7.10 项目符号丢失 241

7.7.11 盒模型溢出问题 242

7.8 HTML默认样式与浏览器解析差异 244

7.8.1 HTML4默认样式 244

7.8.2 浏览器默认样式 247

第8章 设计可重用的CSS与实例 251

8.1 设计可重用的结构 251

8.1.1 可重用的结构设计思路：我的网页结构该怎么规划 251

8.1.2 可重用的结构设计思路：初学者思维定式 252

8.1.3 可重用的结构设计思路：搭架基本框架 252

8.1.4 让结构更符合SEO 255

8.2 设计固定宽度的单栏页面 256

8.2.1 单列版式的设计方法 256

8.2.2 实现单列设计 257

8.2.3 案例实战：设计固定宽度的单列页面 260

8.2.4 案例实战：单列固定版式布局 261

8.2.5 案例实战：重现江南水乡意象画之结构 265

8.2.6 案例实战：重现江南水乡意象画之布局 267

8.3 设计弹性宽度的单栏页面 271

8.3.1 案例实战：设计页面基本结构 271

8.3.2 案例实战：设计CSS布局 275

8.4 设计双栏页面 278

8.4.1 两列版式的基本结构 279

8.4.2 设计固定与自适应宽度兼容版式 281

8.4.3 设计宽度自适应版式 283

8.4.4 设计双浮动兼容版式 286

8.4.5 设计两栏固定版式 287

8.4.6 案例实战：黑色风暴 289

8.5 设计三栏页面 295

8.5.1 三列版式的基本设计方法 296

8.5.2 绝对定位布局的解决方法 297

8.5.3 设计液态版式 299

8.5.4 设计固定版式 302

8.5.5 设计一列液态两列固定版式 304

8.5.6 设计二列液态一列固定版式 306

8.5.7 案例实战：山鹰飞翔 308

第9章 CSS团队合作与开发 316

9.1 统筹CSS文档 316

9.1.1 根据页面类型统筹 316

9.1.2 根据功能模块统筹 317

9.1.3 根据标签类型统筹 317

9.1.4 根据设备类型统筹 317

9.1.5 根据代码规模统筹 317

9.2 合理安排样式顺序 318

9.3 科学定义属性 321

9.3.1 按字母顺序定义 321

9.3.2 按主次关系定义 322

9.3.3 优先定义 322

9.4 严谨命名CSS样式 323

9.4.1 计算机编程命名三法 323

9.4.2 约定CSS样式的名称 324

9.4.3 如何实现CSS样式的严谨命名 324

9.5 养成CSS代码缩写习惯 327

9.5.1 CSS常用属性简写 327

9.5.2 列表和背景样式缩写 329

9.5.3 颜色值缩写 330

9.5.4 字体属性缩写 330

9.6 设计CSS代码格式 331

9.6.1 CSS代码格式一 331

9.6.2 CSS代码格式二 332

9.6.3 CSS代码格式三 333

9.6.4 快速格式化CSS代码 334

9.7 写好CSS注释 335

9.7.1 CSS注释的方法 335

9.7.2 防止注释对源代码的破坏 337

9.7.3 清除CSS注释 339

第10章 CSS规范化商业开发 341

10.1 栅格化设计 341

10.1.1 感性认识CSS栅格设计 341

10.1.2 商业网站的栅格设计 343

10.2 抽象化设计 346

10.2.1 应用CSS类样式 346

10.2.2 CSS的11种通用类样式 347

10.2.3 默认样式 351

10.2.4 特殊类样式 352

10.3 CSS代码的可维护性 353

10.3.1 类名和ID名可读性 353

10.3.2 CSS代码版式规则 354

10.3.3 样式编码顺序 355

10.4 CSS样式的可扩展性 356

10.4.1 继承CSS样式 356

10.4.2 CSS样式的包含关系 358

10.4.3 样式表的分类、组织和管理 360

10.4.4 兼容主流浏览器 362

10.5 规范化网页布局实战 363

10.5.1 案例实战：E1ements CSS 363

10.5.2 案例实战：Blueprint CSS 367

第11章 博客类网站布局与设计——字体和文本样式 376

11.1 博客类网站功能预览 376

11.2 字体样式与设计 376

11.2.1 设置字体：字体介绍 376

11.2.2 设置字体：通用字分类及实例 377

11.2.3 设置字体时注意事项 379

11.2.4 设置大小CSS语法 379

11.2.5 设置大小：使用绝对关键字 380

11.2.6 设置大小：使用相对关键字 380

11.2.7 设置大小：使用相对单位 381

11.2.8 设置大小：使用百分比 382

11.2.9 设置大小：使用磅 383

11.2.1 0关于默认值 383

11.2.1 1案例实战：设计灵活、可读的网页字体 383

11.2.1 2设置字体颜色 384

11.2.1 3设置字体样式 385

11.3 文本样式与设计 387

11.3.1 设置文本缩进 388

11.3.2 设置文本对齐 390

11.3.3 设置文本行距 393

11.3.4 设计分栏文本 394

11.3.5 设置文本字距 396

11.3.6 控制文本行的显示方式 397

11.3.7 设置文本空白显示效果 401

11.3.8 控制文本显示方式和流动方向 402

11.3.9 转换文本大小写 406

11.3.10 设计修饰性文本 407

11.4 案例实战 409

11.4.1 产品策划 409

11.4.2 画板和设计 410

11.4.3 切图和输出 413

11.4.4 网站重构 414

11.4.5 网站布局实现 417

第12章 企业类型网站布局与设计——列表结构与样式 424

12.1 企业网站预览 424

12.2 列表结构和样式 424

12.2.1 列表的基本结构 424

12.2.2 设计列表样式 425

12.2.3 案例实战：设计列表项流动显示 428

12.2.4 自定义列表符号 430

12.3 列表布局综合实践 433

12.3.1 设计灯箱图片新闻 433

12.3.2 设计选项卡效果 436

12.3.3 设计网页皮肤 438

12.3.4 设计网页皮肤：构建列表结构并准备素材 439

12.3.5 设计网页皮肤：设计皮肤 440

12.3.6 设计网页皮肤：动态控制皮肤 441

12.3.7 设计网页皮肤：记忆皮肤 443

12.3.8 设计网页皮肤：恢复皮肤 444

12.3.9 设计滑动门效果 445

12.4 案例实战 448

12.4.1 产品策划 448

12.4.2 画板和设计 449

12.4.3 切图和输出 451

12.4.4 网站重构 453

12.4.5 网站布局实现步骤 454

第13章 生活分类信息网站布局与设计——超链接与导航菜单样式 454

13.1 生活分类信息网站预览 461

13.2 超链接结构和样式 461

13.2.1 认识CSS伪类选择器 461

13.2.2 定义超链接 462

13.2.3 设计超链接样式 463

13.2.4 设计不同的超链接样式 464

13.3 设计导航菜单样式 466

13.3.1 设计水平菜单：普通式 466

13.3.2 设计水平菜单：图像式 467

13.3.3 设计垂直菜单 469

13.3.4 设计多级菜单：平行式多级菜单 471

13.3.5 设计多级菜单：垂直式多级菜单 474

13.3.6 获取更多的导航菜单 478

13.4 案例实战 479

13.4.1 产品策划 479

13.4.2 画板和设计 480

13.4.3 切图和输出 482

13.4.4 网站重构 484

13.4.5 网站布局实现 485

第14章 购物类型网站布局与设计——表单结构与样式 490

14.1 设计表单结构 490

14.1.1 表单基本框架 490

14.1.2 定义表单域 491

14.1.3 定义输入域 492

14.1.4 定义选择域 494

14.1.5 定义文本区域 495

14.1.6 定义辅助表单域 496

14.1.7 改善表单的视觉效果 501

14.2 设计表单样式 505

14.2.1 设置表单字体样式 505

14.2.2 设置表单边框样式 507

14.2.3 设置表单背景样式 510

14.3 案例实战 514

14.3.1 产品策划 514

14.3.2 画板和设计 516

14.3.3 切图和输出 518

14.3.4 网站重构 520

14.3.5 网站布局实现 522

第15章 社区类型网站布局与设计——表格结构与样式 533

15.1 设计表格结构 533

15.1.1 设计基本结构 533

15.1.2 对列进行分组 534

15.1.3 对行进行分组 537

15.1.4 合并单元格 538

15.1.5 对齐单元格 539

15.2 设计表格样式 540

15.2.1 定义表格边框样式 540

15.2.2 设计方便浏览的表格样式 544

15.3 案例实战 553

15.3.1 产品策划 553

15.3.2 画板和设计 554

15.3.3 切图和输出 556

15.3.4 网站重构 558

15.3.5 网站布局实现 560