学习
实践
活动
工具
TVP
写文章

利用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技术有所帮助。如果有没有说清楚的地方,欢迎大家留言^_^

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181008A21GRS00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券