simple水平导航条

Posted 2020-08-12 FunPR

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了simple水平导航条相关的知识，希望对你有一定的参考价值。

话不多说，看代码：

html部分

<body>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Our Services</a></li>
    <li><a href="#">Our Work</a></li>
    <li><a href="#">News</a></li>
    <li><a class="last" href="#">Contact</a></li>
  </ul>
</body>

css处理

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 980px;
  float: left;
  background: #FAA819;
}
ul li {
  float: left;
}
ul a {
  display: block;
  padding: 0.2em;
  line-height: 2.1em;
  text-decoration: none;
  color: #fff;
}
ul a:after {
  content: " |";
}
ul a.last:after {
  content: "";
}

注意的是，如何添加分割线是一个麻烦。可以采用含有分割线的背景图片加载到a标签里，但这样加载出来效果比较慢，也可以采用a:after {content: " |";}，这样其实也有点麻烦，暂时想不出其他好方法。

效果图：

以上是关于simple水平导航条的主要内容，如果未能解决你的问题，请参考以下文章

BootStrap实用代码片段（持续总结）

div自定义的滚动条（水平导航条）

GLSL片段着色器 - 绘制简单的粗曲线

csharp C＃代码片段 - 使类成为Singleton模式。（C＃4.0+）https://heiswayi.github.io/2016/simple-singleton-pattern-us

导航条

如何让一个圆润的div与圆润的导航条相适应？