水平导航介绍

水平导航（Horizontal Navigation）是指网页中横向的导航条，通常用于引导用户进入网站的不同部分或功能。

主要特点

• 在网页头部水平展现，直观易用。
• 通常采用水平列表的形式，使用链接展现不同的导航项。
• 一般包含了网站的主要功能，例如首页、商品目录、购物车、用户中心等。
• 常作为网页布局的重要组成部分，具有统一风格、美观大气的特点。

实现方式

使用自定义样式

可以使用HTML和CSS来实现自定义的水平导航。具体可以利用CSS的display属性等比较基础的属性来进行样式的调整。

<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>
</ul>

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

.nav li {
  display: inline-block;
}

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

.nav li a:hover {
  background-color: #eee;
}

使用框架

也可以使用框架或插件来实现水平导航。以下是常用的一些框架及其示例代码：

Bootstrap

<nav class="navbar navbar-default">
  <ul class="nav navbar-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>
</nav>

Foundation

<nav class="top-bar">
  <ul class="menu">
    <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>
</nav>

小结

水平导航是网站中常用的一种导航形式，可以提高用户的使用体验。实现方式较为简单，可以使用自定义样式或框架来完成。