导航栏 实现标签之间用竖线“ |
您所在的位置:网站首页 › dw怎样设置导航栏 › 导航栏 实现标签之间用竖线“ |
导航栏 实现标签之间用竖线“|”分隔的六种写法 html代码: 首页 关于我们 专业服务效果图: 1、用伪类:before或者:after实现【推荐使用】 .item:before { content: "|"; float: left; color: #94959E; } //把第一个竖线去掉 .item:first-child:before { display: none; }优点:方便简洁,只需在样式中加上几行代码控制 缺点:在样式编辑器里监视不到,不便于调试 2、a标签加boder-left实现; .navigation-bar>a { border-left: 1px solid #94959E; line-height: 1; } .navigation-bar>a:first-child { border-left: none; }优点:也是只需样式控制 缺点:如果导航栏需要顶部或底部加横划线需求则不适合 3、直接在html上加上“|”:【推荐使用】 首页| 关于我们| 专业服务|优点:直接在a标签后面加上“|”即可 缺点:需每个a标签后面都加 4、使用|: 首页| 关于我们| 专业服务|优缺点:跟3点一样 5、使用div实现:【不推荐使用】 首页 关于我们 专业服务优点:简单粗暴 缺点:需每个a标签后面都加个div,且需要设置样式 6、使用切图;【不推荐使用】 首页 关于我们 专业服务优点:简单粗暴 缺点:需每个a标签后面都加个img,且需要设置样式还有切图 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |