[分享]css3怎么用导航栏

CSS3 的出现让创建漂亮的导航栏变得更简单了。下面我们来看看如何使用 CSS3 来实现导航栏。 首先我们需要在 HTML 中创建一个导航栏的结构。一般情况下导航栏的格式类似下面这样： 菜单项1 ...

CSS3 的出现让创建漂亮的导航栏变得更简单了。下面我们来看看如何使用 CSS3 来实现导航栏。
首先我们需要在 HTML 中创建一个导航栏的结构。一般情况下导航栏的格式类似下面这样：

<nav>
   <ul>
      <li><a href="#">菜单项1</a></li>
      <li><a href="#">菜单项2</a></li>
      <li><a href="#">菜单项3</a></li>
      <li><a href="#">菜单项4</a></li>
   </ul>
</nav> 

这里使用的是无序列表（`<ul>`）和列表项（`<li>`）来创建导航栏，每个列表项中包含一个链接（`<a>`）。
下面我们来添加一些 CSS3 属性来美化这个导航栏。首先，让我们通过设置 `ul` 元素的 `list-style` 属性为 `none` 来去掉每个列表项前面的默认表项符号：

nav ul {
   list-style: none;
} 

接下来，我们可以设置链接的颜色和字体大小：

nav a {
   color: #333;
   font-size: 14px;
} 

最重要的一步是设置鼠标悬停时链接的样式。使用 CSS3 的 `:hover` 伪类来实现悬停效果：

nav a:hover {
   color: #000;
   text-decoration: none;
} 

这里设置链接的颜色为黑色，并取消下划线。
最后，我们可以使用 CSS3 的 `border-radius` 属性来添加圆角：

nav ul li {
   border-radius: 5px;
} 

在这个例子中，我们为每个列表项添加了 5px 的圆角半径。
使用以上 CSS3 属性可以轻松地创建一个漂亮的导航栏。当然，还有很多其他的属性可以用来美化导航栏，比如 `box-shadow`、`gradient` 等，可以根据需要进行调整和修改。