[分享]css做漂亮的横向导航栏

CSS做漂亮的横向导航栏让网站看起来更加美观和专业。下面是一些简单的CSS代码示例和建议，可帮助您构建漂亮的横向导航栏。/ 首先我们需要创建一个无序列表来存放导航栏的选项 / 首页 关于我们 联系我...

CSS做漂亮的横向导航栏让网站看起来更加美观和专业。下面是一些简单的CSS代码示例和建议，可帮助您构建漂亮的横向导航栏。

/* 首先我们需要创建一个无序列表来存放导航栏的选项 */
<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><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>

/* 接下来需要用CSS样式来设置导航栏 */
.nav {
  list-style: none; /* 去除原本的列表样式 */
  margin: 0;
  padding: 0;
  background-color: #333; /* 导航栏背景颜色 */
  overflow: hidden; /* 当导航栏项目过多时使用水平滚动条 */
}

.nav li {
  float: left; /* 使用浮动属性 && 设置字体为白色 */
  font-size: 16px;
}

.nav li a {
  display: block; /* 使用块级元素 && 给链接设置字体加粗 */
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 悬停时变色 */
.nav li a:hover {
  background-color: #111;
}

最后这段CSS代码会产生一个类似于如下的横向导航栏：

• 首页
• 关于我们
• 联系我们
• 服务
• 客户案例
• 新闻中心
• 帮助中心

当然，您可以按照自己的需要对CSS代码进行修改，以适应您所创建的导航栏。希望本文能对您有所帮助。