css3 好看的导航栏

CSS3是一种美化导航栏的有效方式。在此前，人们使用图片或JavaScript代码来美化导航栏。它们可能效果很好，但极难管理。现在，使用 CSS3 来美化你的导航栏，无论是在美观性还是在管理性方面，都是一种正确的方式。

/*CSS代码*/

nav {
  background-color: #333;
  padding: 10px;
  border-radius: 10px;
  Box-shadow: 0 0 10px #333;
  text-align: center;
}

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

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
  font-size: 1.2rem;
  font-weight: bold;
}

nav ul li a:hover {
  color: #f44336;
}

在这段 CSS 代码中，我们定义了一个导航条和它的样式。我们使用了一个 `

` 元素来包裹整个导航元素，这样做可以帮助我们更好的管理所有的导航相关代码。

我们还使用了 `border-radius` 和 `Box-shadow` 属性来给导航栏设置了圆角和阴影，使它看起来更加美观和现代化。

同时，为了使所有的导航元素显示为行内元素，我们还设置了 `display: inline-block`，并且避免了使用 `

` 和 `
• ` 元素默认的一些样式。

  最后，我们让导航元素在鼠标悬浮时，文字呈现红色，以达到更加友好和互动的效果。

  使用CSS3创建好看的导航栏已经变得如此简单，所以赶快来尝试一下吧！