利用CSS＋表格技术 实现以虚线为分隔线的导航条

在平时浏览网页时，我们经常能看到如下形式的页面，即banner和页面主体部分占用固定宽度，居中显示在页面中间；导航条占满屏宽度，而具体的内容却居中。这个其实容易实现，只需先做一个宽度为100%的表格，在其中嵌套一个固定宽度的表格居中显示即可。但是下图所示的导航内容是用虚线分隔的，这个如何实现呢？今天就和大家分享一个利用CSS和表格技术实现该效果的方法。

首先我们通过观察可以发现，如果在导航条的上下也加上虚线，其实就是一个1行6列的表格，分隔线就是每个单元格的左边框和右边框，如下图：

所以，只要通过设置表格的上下边框为不显示，左右边框为白色虚线就OK了。同时，每个单元格的宽度一致，内部的文字是上下、左右居中，且为白色。所以只要利用CSS把这些属性写到类中，然后创建一个表格，在单元格里引用该类就OK了。现在我来具体写一下步骤：

1、 写CSS类。这里我将CSS写在当前页面，即写在head区域的中，代码及解释如下图：

上述代码中，“border-style:none dashed;”是设置边框的样式，border-style后面的参数值可以是1-4个：

“border-style:none dashed;”中，none代表无边框，dashed代表虚线框。

2、创建表格并在单元格中引用类，代码如下：

以上就是实现虚线分隔导航条的具体代码，希望对大家学习DW和CSS技术有所帮助。如果有没有说清楚的地方，欢迎大家留言^_^