怎么做html横向导航

1. 前言

横向导航是网页开发中经常用到的一种导航形式，通常显示在网页的最顶部，提供不同页面之间的链接。本文将介绍如何使用HTML和CSS来创建一个简单的横向导航栏。

2. HTML标记

要创建横向导航栏，需要使用HTML的无序列表<ul>和列表项<li>标记。下面是HTML代码的示例：

<ul>

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

上面的代码创建了一个有5个链接的横向导航栏，每个链接使用<a>标记来定义。注意，每个<a>标记都应该包含在<li>标记中，并且所有的<li>标记都包含在一个<ul>标记中。

3. CSS样式

现在，我们需要使用CSS来添加样式到导航栏中。下面是一个基本的示例：

/* 对ul应用样式 */

ul {
  list-style: none; /* 移除列表项的默认样式 */
  margin: 0;
  padding: 0;
  background-color: #333; /* 设置背景颜色 */
}
/* 对li应用样式 */
li {
  display: inline-block; /* 使列表项水平排列 */
  margin-right: 20px; /* 设置每项之间的间距 */
}
/* 对a应用样式 */
a {
  display: block;
  color: #fff; /* 设置文字颜色 */
  text-align: center;
  padding: 14px 16px; /* 设置内边距 */
  text-decoration: none;
}
/* 当链接被鼠标指向时的样式 */
a:hover {
  background-color: #555; /* 设置背景颜色 */
}

上面的代码为导航栏添加了一些基本样式，包括背景颜色、间距、文字颜色、内边距和鼠标悬停时的背景颜色。值得一提的是，使用"display: inline-block;"样式可以使列表项水平排列。

4. 完整示例

现在把上面的HTML和CSS合并，得到一个完整的示例：

<style>

/* 对ul应用样式 */
ul {
  list-style: none; /* 移除列表项的默认样式 */
  margin: 0;
  padding: 0;
  background-color: #333; /* 设置背景颜色 */
}
/* 对li应用样式 */
li {
  display: inline-block; /* 使列表项水平排列 */
  margin-right: 20px; /* 设置每项之间的间距 */
}
/* 对a应用样式 */
a {
  display: block;
  color: #fff; /* 设置文字颜色 */
  text-align: center;
  padding: 14px 16px; /* 设置内边距 */
  text-decoration: none;
}
/* 当链接被鼠标指向时的样式 */
a:hover {
  background-color: #555; /* 设置背景颜色 */
}
</style>
<ul>
  <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>

可以在网页中使用上面的代码，来创建一个简单的横向导航栏。

5. 总结

本文介绍了如何使用HTML和CSS来创建一个简单的横向导航栏。通过使用<ul>和<li>标记，我们可以很容易地创建出一个具有多个链接的导航栏，并通过CSS为其添加样式。有了这些知识，我们可以为网页创建漂亮的导航栏。