[分享]css做出好看的导航条

CSS是一种强大的样式语言，它不仅可以美化网页的外观，还可以增加网页的交互体验。在网站中，导航条是非常重要的元素之一，因为它可以帮助访问者方便地浏览网站内容。今天我们来看一下如何用CSS来制作一个漂亮...

CSS是一种强大的样式语言，它不仅可以美化网页的外观，还可以增加网页的交互体验。在网站中，导航条是非常重要的元素之一，因为它可以帮助访问者方便地浏览网站内容。今天我们来看一下如何用CSS来制作一个漂亮的导航条。

/* 先来定义一下导航条的外观 */
nav {
  background-color: #333; /* 导航条的背景色 */
  color: #fff; /* 导航条文字的颜色 */
  text-align: center; /* 文字居中 */
  padding: 20px 0; /* 上下各留20px的内边距 */
}

/* 定义导航条中的链接样式 */
nav a {
  color: #fff;
  text-decoration: none; /* 取消下划线 */
  font-size: 20px; /* 文字大小 */
  margin: 0 10px; /* 左右各留10px的间距 */
}

/* 当链接被点击时的样式 */
nav a:hover {
  text-decoration: underline; /* 下划线 */
}

/* 当链接处于当前页面时的样式 */
nav .current {
  font-weight: bold; /* 文字加粗 */
  text-decoration: underline; /* 下划线 */
} 

以上是一个基础的导航条样式，下面我们来看一下如何将其变得更加美观。

/* 加入渐变背景 */
nav {
  background: linear-gradient(to bottom, #333, #444);
}

/* 鼠标悬停时的效果 */
nav a:hover {
  color: #f0f0f0; /* 文字颜色变为淡灰色 */
}

/* 当前页面的链接效果 */
nav .current {
  background-color: #f0f0f0; /* 背景色变为淡灰色 */
  color: #333; /* 文字颜色变为黑色 */
  border-radius: 5px; /* 圆角 */
  padding: 5px 10px; /* 上下各留5px，左右各留10px的内边距 */
}

/* 将导航条变为固定在页面顶部的 */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* 确保导航条在最上面 */
}

/* 当页面滚动时，导航条的阴影效果 */
nav {
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
} 

通过以上的样式设置，我们可以看到，导航条不再是一个简单的文字链接，而是变得更加美观、实用。在实际开发中，我们可以灵活运用CSS的各种属性，来实现我们想要的效果。