时间：2023-07-25 00:48:01 | 来源：网站运营
时间：2023-07-25 00:48:01 来源：网站运营
web前端导航栏小竖线三种实现方法：相信很多初学web前端的小伙伴在做导航栏的时候都有看到过下面图中的效果，在不同的选项之间有一个小竖线分隔，那么你知道应该如何才能够实现这种效果吗？
在线咨询
<style>* { margin: 0; padding: 0;}div { height: 40px; background: #999;}a { text-decoration: none; color: #000; float: left; padding: 0 10px; font-size: 12px; border-right: 1px solid #000; margin-top: 10px;}.last { border-right: none;}</style>html结构<div> <a href="#">首页</a> <a href="#" class="last">首页</a></div>这个方法有点小难搞，得控制margin，padding，还得计算距离上面的距离，难搞奥！！！<style> * { margin: 0; padding: 0; } div { height: 40px; background: #999; font-size: 12px; line-height: 40px; } a { text-decoration: none; color: #000; float: left; padding: 0 10px; background: url(line.jpg) no-repeat right center; } .last { background: none; }</style>html结构：<div> <a href="#">首页</a> <a href="#" class="last">首页</a></div>这种方法就没有那么多margin，padding 了，只需要一个padding就搞定了是不是很厉害的亚子<style> * { margin: 0; padding: 0; } div { height: 40px; background: #999; font-size: 12px; line-height: 40px; } a { text-decoration: none; color: #000; float: left; padding: 0 10px; } span { float: left; }</style>html结构：<div> <a href="#">首页</a> <span>|</span> <a href="#">首页</a></div>且慢，请听我说，自己手写 “|” 相对于前两种方式来说更方便一些，前两种方式最后一个元素的 “|” 都需要单独去掉的，自己手写不需要就可以不写，前两种方式还会涉及到选择器的权重问题，如果你的权重不够可能导致最后一个没有的去不掉噢。关键词：实现,方法,导航
