创建灵活的CSS2边框效果

创建灵活的CSS2边框效果 作者： ZDNet China
2004-01-09 12:12 PM

在Internet繁荣发展的早期，为了实现我想要的页面外观和行为，不得不编写一些“丑陋”的代码。我花费了大量时间去准备无数的图形文件，用他们创建鼠标特效和导航栏，结果却发现要通过一个28.8K的modem来下载它们需要的时间太长了。我希望哪天网络带宽能像流水一样通畅无阻，那样就能很快地下载页面。

更具讽刺意味的是，现在的带宽资源丰富了许多，但繁琐的图形编码却已经过时了。幸运的是，重叠样式表2（CSS2）让我们可以使用它的边框属性为需要图形的代码重新创建各种效果。

页面布局

以前，为使页面布局合理准确，我花费大量的时间调整表格、分格GIF以及背景颜色。不幸的是，这样做的结果是最终代码经常不必要地膨胀起来。而且，一旦布局被编码，要想再改变它就很困难，同时还要花费许多时间。

使用CSS2，特别是它的边框属性，整个页面可以一个表格或分格GIF都不用。以Figure A中的页面布局为例。

 

我将从创建header区域开始。参看Listing A中的代码，作为演示它使用了内嵌的样式表。

这段代码创建了一个75px高、四周带有1px宽黑色边框的蓝色高亮区域。为了确保对三种主流浏览器的兼容性，并让布局配合浏览器窗口，我没有设置header的宽度属性。

下面是topnav区域。为创建这个区域，我更新代码为Listing B。

在header下面，有一个三边都带有1px大小黑色边框的深蓝色区域。我没有在topnav的顶部使用边框，因为已经使用了header底边边框来分隔这两个区域。与header一样，不指定topnav的宽度。

接着，我添加了leftnav。代码参看Listing C。

现在，在页面左边有了一个200px宽450px高的灰色栏。在它左右各有1px宽的黑色边框，但上下都没有，而是共用了topnav的底边边框和footer的顶部边框。请注意很重要的一点,leftnav使用了float属性。将float属性设置为“left”，leftnav将总是定位于下一个元素的左边。在这个例子中，它定位于body元素的左边。

添加完body元素后的代码如Listing D。

body区域高450像素，在其右边有1px宽的黑色边框。body区域使用了topnav的底边边框、leftnav的右边边框和footer的顶部边框，这样body的四周上都有1px宽的黑色边框。和header和topnav一样，我没有设置bodyde的宽度属性。

这个页面布局的最后一项是footer的设置。为创建footer，我添加了Listing E中的代码。

关于footer有两点要注意。第一，没有使用任何边框属性。由于footer本身是黑色的，而所有其他元素的边框也都是黑色的，所以footer的周围就没必要再加边框了。第二，我是用了clear属性。将clear设置为“none”，那么footer将不会受相关的其他元素位置的影响。例如，如果body元素使用了“float:left”（提示将footer放到body的右边）， 使用“clear:both”将覆盖float属性，而将footer放置在它原本的页面底部。

导航栏

现在已经完成了基本的页面部署，使用CSS2边框在topnav区域上创建按钮。Figure B显示了页面布局最后的效果图。

 

如同页面布局一样，所有的按钮效果都可以用CSS2来创建。Listing F包含了导航栏的代码。

现在四个排成一行的按钮出现在topnav区域里，每个按钮右边都有1px宽的黑色边框。第一个按钮借用topnav的边框作为其左边框。其它的按钮使用各自左边按钮的右边框作为其左边框。

我使用了“buttons strong”样式来高亮显示与用户当前所在页面对应按钮。例如，如果这就是我的主页，我想要“home”按钮呈现与其它按钮不同的样式。使用“buttons strong”样式，就可以为任何按钮创建与众不同的外观，只需要在文字上添加<strong>标签。

由于其它按钮都具有超级链接，我可以使用不同的链接行为，比如盘旋，来触发不同的样式。这样我就可以创建鼠标特效：当鼠标移过按钮时，按钮的背景色由蓝色变为深灰色。如果没有CSS2，这样的效果通常需要两张图片，一张用于正常状态，另一张用于鼠标移过的状态。

站点更新更容易

CSS2不但简化代码，还使站点的更新比纯HTML页面更为快速简单。比起编码复杂、需要手工修改每一页的HTML页面来，CSS2只需更新样式表就能够改变整个站点。这个例子中为了简便我使用了内部样式表；然而，你可以使用外部样式表获得CSS2的所有优势。

例如，如果你厌烦了leftnav栏并想把它放到右边，那么只需要改变leftnav和body的样式信息。改变将对所有使用这个样式表的HTML页面生效。

另外，如果你想改变按钮的标题，不必创建新的按钮图像，只需改变HTML文件中的文本就可以了。

这就是更新容易、跨浏览器兼容、没有表格、分格GIF以及按钮图片的CSS2外观布局。