div+css纵向导航如何实现且为导航添加超链接

在网页前端开发中，纵向导航是非常常见的一种导航方式。下面是一个完整的攻略，包含了如何使用 div+css 实现纵向导航以及如何为导航添加超链接的过程和两个示例说明。

使用 div+css 实现纵向导航

1. 创建 HTML 结构

首先，我们需要创建一个 HTML 结构，用于容纳纵向导航。下面是一个简单的 HTML 结构示例：

<div class="nav">
  <ul>
    <li><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
  </ul>
</div>

上述代码中，我们创建了一个 .nav 类，用于容纳纵向导航。我们在 .nav 类中创建了一个 ul 列表，用于容纳导航项。我们在 ul 列表中创建了四个 li 列表项，用于容纳导航链接。

2. 创建 CSS 样式

接下来，我们需要创建 CSS 样式，用于定义纵向导航的样式。下面是一个简单的 CSS 样式示例：

.nav {
  width: 200px;
  background-color: #f5f5f5;
}

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

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

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

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

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

上述代码中，我们定义了一个 .nav 类，用于容纳纵向导航。我们将其 width 属性设置为 200px，以使其具有一定的宽度。我们将其 background-color 属性设置为 #f5f5f5，以使其具有一定的背景颜色。我们使用 list-style、margin 和 padding 属性来定义 ul 列表的样式。我们使用 border-bottom 属性来定义 li 列表项的样式，以使其具有一定的边框。我们使用 display、padding、color 和 text-decoration 属性来定义 a 链接的样式。我们使用 :hover 伪类来定义鼠标悬停时的样式。

为导航添加超链接

为导航添加超链接非常简单，只需要在 a 链接中添加 href 属性即可。下面是一个示例：

<div class="nav">
  <ul>
    <li><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
  </ul>
</div>

上述代码中，我们在 a 链接中添加了 href 属性，以使其具有超链接功能。

示例说明

下面是两个示例，演示如何使用 div+css 实现纵向导航以及如何为导航添加超链接。

示例一：创建一个简单的纵向导航

<div class="nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">新闻中心</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</div>

.nav {
  width: 200px;
  background-color: #f5f5f5;
}

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

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

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

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

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

上述代码中，我们创建了一个简单的纵向导航，使用了上述的 HTML 结构和 CSS 样式。

示例二：创建一个带图标的纵向导航

<div class="nav">
  <ul>
    <li><a href="#"><i class="fa fa-home"></i>首页</a></li>
    <li><a href="#"><i class="fa fa-cube"></i>产品中心</a></li>
    <li><a href="#"><i class="fa fa-newspaper-o"></i>新闻中心</a></li>
    <li><a href="#"><i class="fa fa-user"></i>关于我们</a></li>
  </ul>
</div>

.nav {
  width: 200px;
  background-color: #f5f5f5;
}

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

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

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

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

.nav a i {
  margin-right: 10px;
}

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

上述代码中，我们创建了一个带图标的纵向导航，使用了上述的 HTML 结构和 CSS 样式。我们在 a 链接中添加了一个 i 元素，用于容纳图标。我们使用 margin-right 属性来设置图标和文本之间的间距。我们使用 font-awesome 库来添加图标。