超越CSS

1.1 超越CSS简介⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯3

1.1.1 需要什么样的工具来开始学习

⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯3

1.1.2 为什么需要超越CSS ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯4

1.1.3 尽情地发挥创造力⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯8

1.1.4 辅助功能本身就是设计，而不应仅把它当

1.1.4 成一个特性⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯10

1.1.5 向超越CSS进发⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯14

1.2 超越CSS原则⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯21

1.2.1 不是所有的浏览器都显示相同的设计

⋯⋯⋯⋯⋯⋯23

1.2.2 运用所有有效的CSS选择符⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯23

1.2.3 CSS3：展望未来⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯28

1.2.4 运用JavaScript和DOM来弥补CSS的不足

⋯⋯⋯⋯⋯29

1.2.5 避免运用Hacks和滤镜⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯29

1.2.6 使用富含语义的命名规范和微型格式

⋯⋯⋯⋯⋯⋯31

1.2.7 分享你的想法，与他人协作⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯39

1.3 什么使超越CSS变得可能⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯45

1.3.1 意想不到的CSS用途⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯47

1.3.2 浏览器分级支持⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯49

1.3.3 发现，过程，灵感，超越⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯51

1.4 突出内容的设计⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯53

1.4.1 突出内容的途径⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯55

1.4.2 一个典型的没经过优化的CSS布局

⋯⋯⋯⋯⋯⋯⋯57

1.4.3 优化内容顺序而不管有还是没有样式

⋯⋯⋯⋯⋯⋯58

1.5 语义就是含义⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯63

1.5.1 “CSS 裸体日”⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯63

1.5.2 将含义翻译成标记：这个标记是正确的

⋯⋯⋯⋯⋯64

1.5.3 内容告诉你了什么⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯74

1.5.4 语义的前行⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯74

1.6 标记这个世界⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯77

1.6.1 整个世界是一个列表；每一项都扮演着它

1.6.1 自己的角色⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯77

1.6.2 环视四座皆列表⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯80

1.6.3 给我寄一张旧金山的hCard ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯84

1.6.4 学会拓宽视野⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯86

1.6.5 从“内容”开始工作⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯86

1.7 是时候整理一下你所学的知识了

⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯95

2.1 寻找最佳工作流程⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯99

2.1.1 寻找更好的方式⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯99

2.1.2 遵循基于内容的过程⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯101

2.2 搜集内容⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯105

2.3 使用框架图来工作⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯107

2.3.1 传统的框架图在哪里会失效⋯⋯⋯⋯⋯⋯⋯109

2.3.2 框架图有商业价值吗⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯110

2.3.3 传统框架图以及交互脚本⋯⋯⋯⋯⋯⋯⋯⋯⋯111

2.4 使用灰盒方法改进⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯115

2.5 创建静态设计⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯119

2.5.1 更快地通过设计流程⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯119

2.5.2 把标签指南加入静态设计⋯⋯⋯⋯⋯⋯⋯⋯⋯120

2.6 使用交互原型⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯123

2.6.1 交互原型使梦想成真⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯123

2.6.2 创建可重用的代码⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯125

2.6.3 框架图和原型的模型⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯125

2.6.4 所见即所得：你看到了什么？

⋯⋯⋯⋯⋯⋯⋯126

2.7 遵循交互原型最佳实践⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯129

2.7.1 选择用于开发的浏览器⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯129

2.7.2 使用浏览器插件⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯129

2.7.3 尽可能少地使用<div>元素⋯⋯⋯⋯⋯⋯⋯⋯132

2.7.4 确保标签是有效的⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯132

2.7.5 选择定位优先于浮动⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯132

2.7.6 组织CSS ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯134

2.8 过程的实践⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯139

2.8.1 着眼于组成部分⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯139

2.8.2 编写分离内容的标签⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯140

2.8.3 用CSS实现静态设计⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯156

2.8.4 构建布局⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯157

2.8.5 从body开始⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯158

2.8.6 继续向前还是移交⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯164

2.8.7 基本颜色样式⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯164

2.8.8 创建商标⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯165

2.8.9 加上Logo⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯165

2.8.10 导航条样式⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯167

2.8.11 设计页脚样式⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯171

2.8.12 理解元素的排版样式⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯174

2.9 汇总⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯177

3.1 引入基于网格的设计⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯181

3.1.1 设计师与网格⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯183

3.1.2 黄金比例和三分之一规则⋯⋯⋯⋯⋯⋯⋯⋯⋯185

3.1.3 纯粹的弹性布局⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯195

3.1.4 合理的网格设计⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯196

3.2 当今Web设计中的网格⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯199

3.2.1 减法⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯199

3.2.2 Airbag Industries ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯202

3.2.3 Jeff Croft ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯204

3.2.4 Veerle的博客⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯206

3.3 寻找Web之外的网格⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯209

3.4 为Web设计带来新的网格⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯223

3.4.1 打破新闻⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯223

3.4.2 以网格作为指导⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯224

3.4.3 揭穿小秘密⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯227

3.4.4 着迷于新闻手法⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯227

3.4.5 保持你的画面⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯228

3.5 在意想不到的地方发现灵感⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯231

3.5.1 把主页改头换面⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯231

3.5.2 引入基调板⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯234

3.5.3 拥有一个设计剪贴簿⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯236

3.5.4 要获得界面灵感去看杂志吧⋯⋯⋯⋯⋯⋯⋯⋯241

3.5.5 获得版式灵感⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯241

3.5.6 重新审视Flash设计⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯245

3.5.7 使用图片与相片⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯246

3.6 精美的艺术活动⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯253

3.6.1 设计不仅仅是创建引人注目的视觉效果

⋯⋯⋯253

3.6.2 不要把焦点放在技术上⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯254

3.6.3 提升基调⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯257

3.6.4 寻找不同观点⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯259

3.6.5 带着目标剪贴⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯263

3.7 Web设计的美术⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯265

4.1 卓越的CSS ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯271

4.1.1 绝对定位⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯272

4.1.2 相对定位⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯285

4.1.3 浮动的创意⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯291

4.1.4 创建侧边栏⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯296

4.1.5 结合多种技术⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯299

4.2 CSS3（三倍好运） ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯311

4.2.1 各部分的汇总⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯311

4.2.2 开发新的标准⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯313

4.2.3 回到未来⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯314

4.2.4 使用CSS3选择符模块进行设计⋯⋯⋯⋯⋯⋯⋯314

4.2.5 使用斑马纹提高可读性⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯315

4.2.6 使用背景和边框模块进行设计⋯⋯⋯⋯⋯⋯⋯318

4.2.7 使用多幅背景图片进行设计⋯⋯⋯⋯⋯⋯⋯⋯323

4.2.8 设计多栏布局⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯333

4.2.9 使用多栏布局模块⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯339

4.3 高级布局⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯343

4.3.1 回到网格（Grid） ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯344

4.3.2 使用高级布局模块进行设计⋯⋯⋯⋯⋯⋯⋯⋯349

4.4 结束语⋯