[分享]css3左侧导航栏模板

CSS3 左侧导航栏是一个非常常见的网站组件，因为它可以为用户提供更好的导航和浏览体验。下面是一个基本的 CSS3 左侧导航栏模板，你可以直接在网站中使用。 首页 产品 服务 关于我们...

CSS3 左侧导航栏是一个非常常见的网站组件，因为它可以为用户提供更好的导航和浏览体验。下面是一个基本的 CSS3 左侧导航栏模板，你可以直接在网站中使用。

<div class="nav-wrapper">
  <ul class="nav">
    <li class="active">
      <a href="#">首页</a>
    </li>
    <li>
      <a href="#">产品</a>
    </li>
    <li>
      <a href="#">服务</a>
    </li>
    <li>
      <a href="#">关于我们</a>
    </li>
    <li>
      <a href="#">联系我们</a>
    </li>
  </ul>
</div>

.nav-wrapper {
  width: 200px;
  background-color: #ffffff;
  box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.1);
}

.nav {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.nav li {
  border-bottom: 1px solid #e6e6e6;
}

.nav li:last-child {
  border-bottom: none;
}

.nav li a {
  display: block;
  padding: 10px 15px;
  color: #333333;
  text-decoration: none;
}

.nav li.active a,
.nav li:hover a {
  background-color: #f9f9f9;
} 

通过使用上面的模板代码，您可以轻松地在您的网站中创建一个简单但漂亮的左侧导航栏。您可以通过更改颜色、背景图像和字体来自定义导航栏样式。