纯css实现蓝色圆角效果水平导航菜单代码

本文介绍了如何纯 CSS 实现蓝色圆角效果的水平导航菜单。本文主要分为以下几个部分：

1. 初识水平导航菜单

水平导航菜单是网页中常见的一种导航方式。它通常显示在页面的顶部，由一系列水平排列的链接组成，用户可以通过点击链接来访问不同的页面。

2. 实现蓝色圆角效果的水平导航菜单

我们可以使用 CSS 来实现一个漂亮的蓝色圆角效果的水平导航菜单。下面是实现代码：

 

/* 定义导航菜单 */
nav {
  background-color: #2196f3;
  border-radius: 20px;
}
/* 定义导航链接样式 */
nav a {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
}
/* 定义链接悬停样式 */
nav a:hover {
  background-color: #fff;
  color: #2196f3;
}

以上代码定义了导航菜单的背景色、圆角样式以及导航链接的样式。在链接悬停时，我们还通过修改背景色和文字颜色来实现了一个简单的动画效果。

3. 如何编写水平导航菜单

在实际编写水平导航菜单时，我们可以按照以下步骤进行：

步骤1：创建HTML结构

首先，我们需要在HTML中创建导航菜单的结构。可以使用 `ul` 和 `li` 标签组合来创建一个有序的列表，每个列表项表示一个导航链接，如下所示：

 

<nav>
  
    <a href="#">首页</a>
    <a href="#">产品中心</a>
    <a href="#">新闻中心</a>
    <a href="#">联系我们</a>
  
</nav>

步骤2：应用CSS样式

接下来，我们需要为导航菜单应用上述 CSS 样式。只需在CSS文件中将样式描述复制到```nav```和```nav a```选择器中即可。

步骤3：为当前页面的链接添加样式

我们还可以为导航菜单中当前页面的链接添加样式。为此，我们需要在HTML文档中为当前页面对应的列表项添加一个```class```标识符。如下所示：

<nav>
  
    <a href="#">首页</a>
    <a href="#">产品中心</a>
    <li class="current"><a href="#">新闻中心</a></li>
    <a href="#">联系我们</a>
  
</nav>

接下来，在CSS文件中添加如下代码：

nav .current a {
  background-color: #fff;
  color: #2196f3;
}

这将使当前页面对应的链接在悬停时呈现不同的样式。我们可以通过修改样式来增强这种区别。

4. 结论

本文介绍了如何使用 CSS 实现一个漂亮的蓝色圆角效果的水平导航菜单。要记住三个主要步骤：创建 HTML 结构、应用 CSS 样式以及为当前页面的链接添加样式。希望这篇文章对您有所帮助。