基于CSS制作天蓝色导航菜单

下面是“基于CSS制作天蓝色导航菜单”的完整攻略：

步骤一：HTML结构

首先，在HTML中添加导航菜单的结构。可以使用<nav>标签来表示导航菜单，再使用<ul>和<li>标签来创建菜单项。例如：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">新闻动态</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

步骤二：CSS样式

接着，使用CSS样式来美化导航菜单。首先，需要给菜单项添加样式，并设置鼠标悬停时的效果。例如：

nav ul {
  list-style: none; /* 去掉ul的默认样式 */
  margin: 0; /* 去掉ul的默认margin */
  padding: 0; /* 去掉ul的默认padding */
}

nav li {
  float: left; /* 让li横向排列 */
}

nav a {
  display: block; /* 让a标签占满整个li */
  padding: 10px; /* 设置a标签的内边距 */
  color: #FFF; /* 设置字体颜色为白色 */
  text-decoration: none; /* 去掉下划线 */
}

nav a:hover {
  background-color: #4393F6; /* 鼠标悬停时的背景色 */
}

然后，设置导航栏的背景色、高度和边框等样式。例如：

nav {
  background-color: #2E86C1; /* 设置导航栏的背景色 */
  height: 50px; /* 设置导航栏的高度 */
  border-bottom: 3px solid #1F618D; /* 设置导航栏的下边框 */
}

最后，给当前所在页面的菜单项添加选中状态的样式，使其在页面刷新或跳转后仍然处于选中状态。例如：

nav a.current {
  background-color: #4393F6; /* 当前菜单项的背景色 */
}

示例说明

示例1：添加图标

如果需要在导航菜单中添加图标，可以使用background-image属性来设置背景图片，再使用padding属性调整图标的位置。例如：

nav a.home {
  background-image: url("home.png"); /* 设置背景图片 */
  background-repeat: no-repeat;
  background-position: left center; /* 设置背景图片位置 */
  padding-left: 30px; /* 调整左内边距 */
}

示例2：使用响应式设计

如果需要在移动设备上实现响应式导航菜单，在CSS中添加@media查询，使菜单在不同屏幕大小下有不同的显示方式。例如：

@media (max-width: 768px) {
  /* 设置在屏幕宽度小于768px时的样式 */
  nav {
    height: auto; /* 设置导航栏高度为自适应 */
  }
  nav ul {
    display: none; /* 隐藏ul，使菜单项不可见 */
  }
  nav li {
    float: none; /* 取消li横向排列 */
  }
  nav a {
    display: block;
    padding: 10px;
    color: #FFF;
    text-decoration: none;
    border-top: 1px solid #1F618D; /* 设置菜单项之间的边框 */
  }
  nav a:hover {
    background-color: #4393F6;
  }
  nav a.current {
    background-color: #4393F6;
  }
}

以上就是“基于CSS制作天蓝色导航菜单”的完整攻略，通过HTML和CSS的结合，可以实现更多美化效果和响应式设计，让网站导航更加美观和实用。