超越css的网页设计思想

1：以网页想表达的内容为基础进行网页设计。因为网页设计一直在追求内容与显示样式分离。所以先用html标签把内容写完，然后再考虑显示的样式。内容“看起来像什么”并不重要，重要的是内容本身，通过内容信息本身就可以选择比较恰当的标签。

2: 网站对浏览器进行了分级。

（1）旧版本的浏览器可以看到网站的基本功能，能够完整地进行业务操作，只是没有最新的css特效。

（2）最新版本的浏览器可以显示最新的css效果

（3）

3：整个世界是一个列表。标准网页中会有大量的无序列表，有序列表和定义列表。根据内容为标签增加业务意义，业务信息写在class属性中例如：

665 3rd Street

San Francisco

94107

California

4:设计网页的工作顺序如图

5:当为客户显示系统时，最好使用html+css做原型，而不是excel,或图片。因为客户可以对原型进行简单的交互，对系统理解的更好。

6:在开始使用CSS之前，你将看到无修饰的文本单独出现在浏览器里是什么样子。这能帮助我们理解内容的次序，以及无法应用样式表内容是怎样显示给访问者的。

7：在组织元素时，要大量使用.ul ol li 列表

8:把css文件分成3个：

layout.css:布局样式包含了显示属性，浮动，定位，宽度，高度，填充和边距。

colors.css：颜色样式包含了背景属性，颜色，图像，以及文本颜色。

typography.css:印刷样式，包含了字体和字体大小，行高，字符间隔和文本装饰。

9：CSS有4种定位方式

Relative: 把一个元素从它正常的位置移开，原来的地方留下一块空白的区域。

Absolute: 绝对定位方式将元素相对于它在文档树中的最近的已定位块容器定位。如果没有已定位的块容器，绝对定位的元素就会根据根元素<html>来定位(已定位指position属性设为absolute或relative的元素，它的位置已经不由文档流来决定).向根部查找最近的DOM树中已经定位的块级节点。

Fixed: 元素固定在浏览器窗口的固定位置上.

Static:它是正常文件流的默认位置。重置元素的定位默认值。