不要图形繁多的页面创建灵活的CSS2边框效果

作者： ZDNet China
        回到Internet开始蓬勃发展的初期，我编写了一些相当糟糕的代码，好让页面的外观和行为就像我希望的一样。我花了很多时间准备了无数的图形文件，用它们来创建鼠标激活链接（mouseover）效果和菜单条，结果却发现在28.8Kb的调制解调器上需要花太长的时间来载入。我一直在期待会有一天，带宽能够像流水一样快，这样我的页面就能够被快速地加载。

讽刺的是，现在宽带更加普及了，但是图形繁多的代码已经不流行了。幸运的是，层叠样式表2（Cascading Style Sheets 2， CSS2）让我们能够使用其边框属性，生成原来需要很多图形和代码才能够生成的效果。

页面布局我曾经花了很多时间，使用TABLE标签、间隔GIF和背景色让我的页面布局好看。不幸的是，写成的代码常常都很臃肿，而且毫无必要。一旦编写代码建立了布局，要改变它也很困难和耗时间。

有了CSS2，尤其是其边框属性，这个页面就可以轻松布局，而不需要用任何的TABLE标签或者间隔GIF。现在让我们利用图A里的布局作为例子。

 



我会从创建标题区开始。为了更好的说明问题，Listing A里的代码使用了内嵌样式表（inline style sheet）。

这段代码创建了一个75像素高的淡蓝色区域，区域的四周是一个像素的黑色边框。为了保证与所有三个主要的浏览器兼容，并让布局填满浏览器窗口，我没有为标题设置宽度属性。

然后就是topnav区。为了创建这个区域，我更新了代码，如Listing B所示。

现在，就在标题下面，有一个深蓝色的区域，这个区域的三面是一个像素的黑边框。我没有在topnav的顶部使用边框，因为我用标题区底部的边框来分隔这两个区域。就像标题区一样，我没有为topnav指定宽度。

下一步我加入了leftnav。其代码就像Listing C里的一样。

现在，页面的左侧竖了一个200像素乘450像素的灰色栏。它左右两边各有一个一个像素的黑色边框，而上下却没有。它将利用topnav底部的边框和页脚。要注意，leftnav使用了浮动属性（float attribute）。通过将浮动设置为“左”，leftnav就总是位于它后面元素的左侧。在本文的例子里，它位于主体元素（body element）的左侧。

在加入主体元素之后，代码就像Listing D里的一样。

主体区有450像素高，在
4000
其右侧有一个一个像素的边框。主体利用了topnav顶部的边框、leftnav右侧的边框，而页脚就让主体区形成了一个四面都有一个像素边框的假象。就和标题以及topnav一样，我没有对主体使用宽度属性。

 

这个布局最后一个区域是页脚。为了创建页脚，我加入了Listing E里的代码。

关于页脚有两件事要注意。第一，这里没有使用边框属性。由于页脚和其他所有元素的边框都是黑色的，所有就形成了在页脚四周有一个黑色边框的假象。第二，我使用了clear属性（clear attribute）。并把clear设置为“无（none）”，这样就不会受到其它元素相对位置的影响。例如，如果主体元素使用了“float:left”（这会将页脚放在主体的右侧），页脚里的“clear:both”会取代浮动属性，并把页脚放在它所属的底部位置。
导航条现在我们已经完成了基本的页面布局，我可以使用CSS2边框在topnav区域里创建人工的按钮。图B显示了最终页面应该什么样的。

 



就和页面布局一样，所有的人工按钮都可以用CSS2来创建。Listing F提供了添加导航条所需的代码。

现在topnav区域里会出现一行四个按钮。每个按钮的右边都有一个一个像素的黑色边框。第一个按钮利用了topnav区域的边界作为它的左边框。其他的按钮都使用它们左边按钮的边框作为其左边框。

我用了一个“按钮突出（buttons strong）”风格来突出与用户当前所在页面相对应的按钮。例如，如果这是我的主页，我就希望“主页（home）”按钮的风格和其他的不一样。使用“按钮突出”风格，我可以为任意按钮创建一个不同寻常的风格，只用简单地在文本前后放一个<strong>标签就行了。

由于其它按钮的风格也用于超链接，所以我可以使用不同的链接行为，例如鼠标悬停（hover），来触发不同的风格。这就让我能够创建一个鼠标激活链接的效果，这样当鼠标放在按钮上的时候，按钮的背景就会从蓝色变成深灰色。如果没有CSS2，这种类型的效果就需要使用两个图形，一个用于缺省的状态，另一个用于鼠标激活链接的状态。

网站的更新更容易
CSS2不仅会生成更加清爽的代码，而且能够比只有HTML的页面更快更容易地更新你的网站。利用CSS2，你不会面对繁多的、每个都需要手动更新代码的HTML页面，它让你通过更新样式表就轻松地更改整个网站。我在这个例子里使用了一个内嵌样式表；但是，你应该使用一个外部样式表来获取CSS2的所有好处。

例如，如果你厌倦了leftnav条，并希望把它放在右边，你可以只需要更改用于leftnav和主体的样式信息。这种变化会反映到所有使用该样式表的HTML页面上。

此外，如果你想要更该其中一个按钮的名称，你不需要创建新的按钮图形。只用更该HTML文件里的文本就行了。

这就是它了，一个兼容跨浏览器的CSS2页面布局，没有表格，没有间隔GIF，没有按钮图形，而且易于更新。