[分享]css写静态的滑动nav

静态的滑动导航栏是一个常见的页面组件，可以让用户更方便地浏览网页内容。在CSS中，我们可以用一些简单的代码来实现这一效果。// HTML Home About Services Contact ...

静态的滑动导航栏是一个常见的页面组件，可以让用户更方便地浏览网页内容。在CSS中，我们可以用一些简单的代码来实现这一效果。

// HTML
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

// CSS
nav {
  background-color: #333;
  height: 60px;
  width: 100%;
}

ul {
  list-style: none;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 20px;
  transition: background-color 0.5s ease;
}

li a:hover {
  background-color: #111;
} 

在HTML中，我们使用<nav>标签来包裹导航栏，使用<ul>和<li>标签来创建无序列表。在CSS中，我们针对nav、ul、li以及a标签做了样式定义。具体来说：nav的背景颜色为#333，高度为60px；ul设置了列表样式为none，同时为了让列表溢出隐藏，我们设置了overflow属性；li浮动到了左边，li a的样式定义了文字颜色、文本居中、去除下划线等，当鼠标悬停在a标签上时，我们使用了CSS过渡效果。

通过这些简单的CSS代码，我们就可以轻松创建一个简洁大方的静态滑动导航栏了。