位置：广州松河 > 技术支持 > zblogphp模板制作——特效：菜单效果1_CSS学习

zblogphp模板制作——特效：菜单效果1_CSS学习

来源：网络整理时间：2023/3/4 0:55:22 共 3621 浏览

以上效果图，是我最近在做zblogphp模板准备用到的，之前的方法很笨，今天分享一个菜单高级CSS：

去除了最后一个边框:

<nav>

  <ul>

    <li><a href="#">About</a></li>

    <li><a href="#">Portfolio</a></li>

    <li><a href="#">Blog</a></li>

    <li><a href="#">Contact</a></li>

  </ul>

</nav>

下面是CSS：

body {

  font-family: "Oswald", sans-serif;

  line-height: 1.25;

  margin: 0;

}

nav {

  background: #384150;

  padding: 2em;

  text-align: center;

}

nav ul {

  padding: 0;

}

nav li {

  display: inline-block;

  font-size: 1.5em;

  padding: .25em 1em;

  text-transform: uppercase;

}

nav li:not(:last-child) {

  border-right: 1px solid #666;

}

nav a {

  border-bottom: 3px solid #666;

  color: #ccc;

  text-decoration: none;

}

nav a:hover {

  border-bottom: 3px solid #8bc34a;

}

使用 :not() 选择器来决定表单是否显示边框！

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：垂直居中（上下左右都居中）任何元素CSS代码_CSS学习 | ·下一条：ul li带背景颜色块状tag标签css_CSS学习