超越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 结束语⋯