--></style>
一些实例：
等等，还有更多：
想了解更多关于过渡性设计的信息，请阅读 eric meyer on css 的第一章。和 jeffrey zeldman 的 designing with web standards 的大部分内容。
css 排版：希望就在眼前
大部分用户使用的浏览器都有很好的 css 支持，当然它们也有个各自的脾性，不过只要你习惯了它们，就能够处理得很好。
编写 css 代码很简单。即便对于一个看 javascript 就像看天书的家伙来说也是如此。
if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {
每条 css 规则都有一个选择符和一个声明。声明是由 属性名(property) 和 属性值(value) 组成的。属性名一般使用连字符(-)连接。
body {margin:0; padding:0}
.related {float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue}
#footer {color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0}
结构化标记：所写即所想，所想即所写
即便书写 css 很简单，使用 css 来排版却真的需要一种和我们以往有些不同的思维方式。
我们排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别和信息的结构。
我们用 <h1> 标记来标示最重要的头条；次一级的条目则用 <h2> 来标记，以此类推；而段落则放在 <p> 标记中。
这就是我们称之为“结构标记”或“语义标记”的东西。
你的内容将不放在表格和表格元素中，取代它们的是 div 元素。还要给你的 div 元素安排一个 id 或 class，不过这是为了描述它们的内容或功能，而非它们的外观。
避免 <b>ed 与 <br>eakfast 标记
且想想为何你希望某个对象按特定的方式出现；它有什么含义？你的标记能够也必须表达意思，即便对于那些无法观看页面的人来说也是如此。语义性的标记使得你的页面对一切受众都更有亲和力，这还包括了搜索引擎。
当你把某个对象设为斜体时，大概要么就是想强调它，要么是想 引用某个书中标题吧？ 如果是前者，应该用 <em>；如果是后者，其实得用 <cite>。
如果某个对象被标记为粗体，事实上它应该被标记的是， <strong>。
如果你希望在某处添加一个换行，这大概是开始了一个新的开头。如果不是开头，会不会是某种在你的站点中出现过的class (类型)？在上面两种情况下，你都应该用 css 替换 <br>。
.foo {display:block}
如果希望了解更多，请阅读 bed and breakfast markup (b&br)， tantek Çelik 作品。
导航条该怎么做？
考虑你需要导航的内容是一些无序的链接这种情况：
用 <ul> 标签来编辑它们。
- link1
- link2
- link3
- link4
- link5
水平导航条
我们可以用 css 来控制这个列表显示在网页上的外观。
通过使用 display:inline 我们可以创建水平导航条。
这是上面这个导航条用到的代码：
#nav1{
margin-top: 1em;
margin-bottom: 0.5em;
}
#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}
#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}
#nav1 li:first-child {
border: none;
}
垂直导航条
这是垂直导航条的代码：
#nav2 {
background-color: silver;
border: solid 1px gray;
width: 8em
}
#nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}
#nav2 li {
margin: 0;
padding: 0.25em 0.5em 0.25em 1em;
border-top: 1px solid gray;
width: 100%;
display: block
}
html>body #nav2 li {
width: auto;
}
#nav2 li:first-child {
border: none
