[分享]css3垂直导航教程

 CSS3垂直导航教程 在网页设计中，导航栏是一个非常重要的组件。好的导航栏能够提高用户体验，使用户更方便的浏览网站内容。本文将介绍如何使用CSS3实现垂直导航栏，让你的网站看起来时尚而又实用。 CS...

 CSS3垂直导航教程

在网页设计中，导航栏是一个非常重要的组件。好的导航栏能够提高用户体验，使用户更方便的浏览网站内容。本文将介绍如何使用CSS3实现垂直导航栏，让你的网站看起来时尚而又实用。

CSS代码：
nav {
  margin: 50px 0;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 200px;
  background-color: #f2f2f2;
  border-radius: 5px;
}
nav ul li {
  position: relative;
  border-bottom: 1px solid #ddd;
}
nav ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 15px;
  text-decoration: none;
  transition: all 0.4s ease-out;
}
nav ul li a:hover {
  background-color: #ddd;
  color: #333;
} 

首先，我们需要在HTML中添加一个nav元素，并在其中包含一个ul元素。 在CSS中，我们设置了nav的margin为50px用于调整导航栏与其他元素的距离。 接下来，我们设置了ul元素的样式，包括去掉了默认的列表标记、设置了padding和margin以及元素宽度。 ul元素中每个li都被设置为一个相对定位的元素，并添加了一个底部边框样式。 我们使用了a标记作为链接，并对其设置颜色、字号、粗细、 padding和解释下划线等样式。 当鼠标悬浮在链接上时，我们添加了一个简单的背景颜色和字体颜色过渡效果，使用户体验更加友好。 最后，我们使用了border-radius样式，并将其设置为5像素，从而使导航栏边缘更加圆润。