第三阶段：我们不需要表格！下面我们将看看什么是基于web标准的、用CSS布局的设计。我将从内容的标识开始。我将尽量使标识有语义，避免多余的标签。 页头是一个图片，但它也是一个标题，所以我这样写代码： <h1>Butterfly Watchers Association. They flutter. We watch them.</h1> 我将稍后再考虑如何正确显示这个标题(理想情况下，我们尽可能多的关心内容，尽可能少的关心布局)。其他标题(news，Sightin gs and Membership)将被标识为<h2>。 菜单从根本上讲就是一个无序列表(list)，所以将被标识为list。段落不需要分类(我们采用继承选择器来把它们"挂"在包含的层中)。我将对比原始的内容文本，看为了实现布局需要增加多少额外的标签(我将尽力避免增加标签)。 这就是原始的内容文本。看看原代码，它符合xhtml1.0 transitional规范。注意所有的元素都已经被包含在定义了名称的<div>中。新闻中的日期也被加上了date的类(class)。你可以看到代码非常简单。 第1小时 定义"container" 层的border为1px。通过在body样式中定义"text-align: center"将内容居中。为了在所有浏览器中都居中，还在"container"中定义了margin: 0 auto;(意思就是top=0, right=auto, bottom=0, left=auto)。居中的处理方法和表格一样容易。 定义"body"的padding"top"和"bottom"数值为20px(不直接在"container"中定义padding是为了适合所有浏览器)。 无序列表(li)必须定义为"display:inline"，这样菜单会被显示在一行内。我在菜单间增加了导航图标。这些导航图标是用不重复背景方法定义的，可以精确定义(x,y)位置，类似这样： background: url(menuBullet2.gif) no-repeat 4px 9px; 菜单的点击颜色变化效果采用链接的hover样式，不再需要JavaScript。 我设置页头的蝴蝶图片为<h1>的背景，这样可以不用担心易用性，在不能显示图片的设备中(如屏幕阅读机和搜索机器人)也可以正常阅读标题。 第2小时 菜单的第一项(HOME)使用一个不同的图标，我不得不隐藏原来的背景，为HOME菜单增加一个额外的id(frst): #hMenu ul li#frst 再另外一个(CONTACT)图标： background: transparent url(menuBullet3.gif) no-repeat 615px 9px; 我无法用CSS控制2列有一样的高度，幸运的是，我可以用背景图片来变通实现。我定义了"container"纵向重复背景。 background: #fff url(bgMain.gif) repeat-y;  第3小时 CSS定义盒比表格方便多了，特别是边框的许多属性非常有用。 现在我开始定义<h2>标题。图标的定义和上面的方法一样。 我将"news"层浮动(float)在"sightings" 和 "membership"的右面。 定义"copyright"层" clear: both;"，这样它可以跟在浮动层的下面。将正文中的蝴蝶图片浮动在右面，文字可以自动环绕在图片周围。定义图片的1px border和设置padding距离就可以实现原来2个表格嵌套的效果。 又发现一些问题：版权层与内容层有部分重叠。 第4小时 显示的错误与"sightings" and "membership"的float:right; 定义有关。将它们浮动在左面就可以解决这个问题，这看上去很奇怪。我用firefox进行第一次测试，恩，看上去还不坏，只是菜单的图标有几pixel的移位。 有一些CSS技巧可以修正在非IE浏览器的显示效果，例如给不同浏览器不同的属性值。 我同一元素定义中使用了!important 值，相同的定义写在前面可以优先执行，这个值不被IE浏览器支持。 background: url(menuBullet2.gif) no-repeat 4px 6px !important;
background: url(menuBullet2.gif) no-repeat 4px 9px; 在CSS中，如果同一元素有多个定义，最后一个是有效的。但是因为IE不支持!important，所以IE将使用第二个定义值，而其他浏览器将采用第一个定义值。 全部完成，看这里的结果。 | 