垂直导航在网页设计中是一种常见的布局方式，它可以使用户快速找到所需的信息，在HTML中，我们可以通过CSS来设置垂直导航的样式和布局，本文将详细介绍如何在HTML中设置垂直导航。
1、创建HTML结构
我们需要创建一个HTML文件，并在其中添加一个包含导航链接的列表，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直导航示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul class="vertical-nav">
<li><a href="">首页</a></li>
<li><a href="">产品</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</nav>
</body>
</html>
2、创建CSS样式
接下来，我们需要创建一个CSS文件（styles.css），并在其中设置垂直导航的样式，以下是一个简单的示例：
/* 重置浏览器默认样式 */
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置导航容器的样式 */
nav {
display: flex;
flex-direction: column;
background-color: 333;
width: 200px;
height: 100vh; /* 使导航容器占据整个视口高度 */
}
/* 设置导航链接的样式 */
.vertical-nav {
list-style-type: none; /* 去掉列表前的圆点 */
}
.vertical-nav li {
padding: 15px; /* 设置内边距 */
}
.vertical-nav li a {
color: fff; /* 设置链接颜色 */
text-decoration: none; /* 去掉链接下划线 */
}
3、使用媒体查询实现响应式布局
为了使垂直导航在不同设备上都能正常显示，我们可以使用媒体查询来实现响应式布局，以下是一个简单的示例：
@media (max-width: 768px) {
nav {
width: 100%; /* 当屏幕宽度小于等于768px时，导航容器宽度为100% */
}
}
4、测试垂直导航效果
将HTML和CSS文件保存在同一个文件夹中，然后用浏览器打开HTML文件，查看垂直导航的效果，如果一切正常，你应该可以看到一个包含四个导航链接的水平导航，点击这些链接，页面不会发生任何变化，因为我们还没有为它们添加跳转功能，接下来，我们将学习如何为导航链接添加跳转功能。
5、为导航链接添加跳转功能
要为导航链接添加跳转功能，我们需要在HTML文件中为每个链接添加href属性，并指向相应的页面，我们可以将“首页”链接指向网站的首页，将“产品”链接指向产品页面等，以下是修改后的HTML代码：
<body>
<nav>
<ul class="vertical-nav">
<li><a href="index.html">首页</a></li>
<li><a href="products.html">产品</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</body>
现在，当你点击导航链接时，浏览器应该会跳转到相应的页面，你可以根据需要修改导航链接的href属性，以适应你的网站结构。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/243949.html
微信扫一扫 