[分享]css两个悬浮导航

CSS悬浮导航是网站设计中常用的元素之一，它能使用户在使用网站时轻松找到自己需要的信息。下面我们将介绍两个常用的CSS悬浮导航，并演示如何使用CSS代码实现它们。 第一个悬浮导航这是一种简单的悬浮导航...

CSS悬浮导航是网站设计中常用的元素之一，它能使用户在使用网站时轻松找到自己需要的信息。下面我们将介绍两个常用的CSS悬浮导航，并演示如何使用CSS代码实现它们。

第一个悬浮导航

这是一种简单的悬浮导航，它通常出现在网站的头部或侧边栏，可以快速导航到站点的主要内容。

.nav {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  background-color: #2980b9;
  color: #fff;
  padding: 10px 0;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.nav li {
  font-size: 18px;
  font-weight: bold;
}

.nav a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease-out;
}

.nav a:hover {
  color: #c0392b;
} 

代码解释：我们首先创建了一个导航栏元素 .nav，并将其固定在页面的顶部，使其不随页面滚动而变化位置。然后我们设置导航栏的样式，包括背景颜色、字体颜色、内边距。接着我们使用Flex布局将导航栏的子元素横向排列，并设置链接样式和悬浮时字体颜色的变化。

第二个悬浮导航

这是一种比较复杂的悬浮导航，它通常被用于展示站点的不同板块或分类，可以通过悬浮效果让用户快速找到自己需要的信息。

.nav2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.nav2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.nav2 li {
  display: inline-block;
  margin: 10px;
}

.nav2 a {
  color: #333;
  text-decoration: none;
  font-size: 18px;
  padding: 10px;
  border: 1px solid #333;
  border-radius: 5px;
  transition: background-color 0.3s ease-out;
}

.nav2 a:hover, .nav2 a.active {
  background-color: #333;
  color: #fff;
} 

代码解释：我们首先创建了一个导航栏元素 .nav2，并将其设置为绝对定位，并使用transform属性将其移到页面中心。然后我们设置导航栏的样式，包括背景色、内边距、圆角和阴影。接着我们将导航栏的子元素设置成行内块元素，并设置链接的样式和悬浮时和选中时的背景和字体颜色。

到这里我们已经介绍了两种常用的CSS悬浮导航，并演示了如何使用代码实现它们。它们不仅可以提高网站的导航效率，还能提升页面的美观程度。