css中竖的html中分割线标签怎么弄

来源：蜘蛛抓取(WebSpider) 时间：2021-05-29 22:32 标签： html中分割线标签

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

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

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

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

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

我要回帖

更多关于 html中分割线标签 的文章

 

随机推荐