CSS网页布局入门教程9：用CSS设计网站导航——横向导航

下面我将详细讲解CSS网页布局入门教程9：用CSS设计网站导航——横向导航的完整攻略。

1. HTML结构搭建

首先要先在HTML中搭建好导航栏的基本结构，包括导航栏容器以及导航链接，如下所示:

<nav class="nav">
  <ul class="nav-bar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav> 

1. CSS样式设计

接下来需要使用CSS来为导航栏定制样式，以达到我们的设计要求。首先需要给导航栏容器设置宽度，并让其横向居中。

.nav {
  width: 100%;
  text-align: center;
}

接着，我们需要对导航链接设置样式，包括字体大小、字体颜色、鼠标悬浮效果等。

.nav-bar li {
  display: inline-block; /* 将li元素变成行内块状元素 */
  margin: 0 20px; /* 设置每个链接的间距 */
}
.nav-bar li a {
  font-size: 20px;
  color: #666;
  text-decoration: none;
  padding: 10px 15px; /* 设置每个链接的内边距 */
  border-radius: 4px; /* 圆角 */
}
.nav-bar li a:hover {
  background-color: #666;
  color: #fff;
}

除此之外，若想让导航栏随着滚动一直保持在屏幕的顶端（即固定在顶部），我们还需要添加如下的代码：

.nav {
  position: fixed;
  top: 0;
}

1. 示例说明

（1）示例1：改变鼠标悬停效果

有时候我们想为不同的导航链接设置不同的鼠标悬停效果，例如，让鼠标悬停在Home链接上时，文字变成红色。

.nav-bar li a:hover {
  background-color: #666;
  color: #fff;
}
.nav-bar li a:hover:nth-child(1) { /* 选择第一个链接 */
  color: red;
}

（2）示例2：在导航栏右侧添加搜索栏

很多网站在导航栏右侧会添加搜索框以方便用户搜索内容。现在我们来实现这个功能。

首先需要在导航栏容器里添加一个搜索框容器，并在CSS中对其样式进行设置。同时我们需要使用CSS中的“float”属性来扩大搜索框的宽度。

HTML：

<nav class="nav">
  <ul class="nav-bar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
    <li class="search-box">
      <form action="">
        <input type="text" placeholder="Search...">
        <button type="submit">Search</button>
      </form>
    </li>
  </ul>
</nav>

CSS：

.search-box {
  float: right; /* 将搜索框容器向右浮动 */
}
.search-box input[type="text"] {
  width: 150px; /* 设置搜索框的宽度 */
  padding: 5px; /* 设置搜索框元素的内边距 */
}
.search-box button[type="submit"] {
  padding: 5px 15px; /* 设置按钮元素的内边距 */
  margin: 0 5px; /* 设置搜索框和按钮元素的距离 */
  background-color: #666; /* 设置按钮元素的背景颜色 */
  color: #fff; /* 设置按钮元素的字体颜色 */
  border: none; /* 取消按钮元素的边框 */
  border-radius: 4px; /* 给按钮元素添加圆角 */
}

这样，我们就实现了导航栏右侧的搜索栏功能。

以上就是CSS网页布局入门教程9：用CSS设计网站导航——横向导航的详细攻略。