CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版

这里是“CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版”的完整攻略。

介绍

这篇教程将会告诉你如何通过CSS样式来创建带有当前标识的标签式横向导航图片美化版。这个导航栏将会基于横向的无序列表，并且会用到一些有趣的CSS特效来实现。在这个教程中，我们将详细介绍CSS样式，并且会有两个示例提供帮助。

步骤

第1步：HTML结构

首先，我们需要创建HTML结构。需要创建一个包含链接的无序列表（ul），每个链接都是导航的一个选项。在每个选项中添加一个span元素，这个元素将会被用来指示当前选中的导航选项，然后在每个li元素中添加一个a元素、一个img元素和一个span元素：

<ul>
  <li><a href="#">Home <span class="current-page"></span></a></li>
  <li><a href="#">About Us <span></span></a></li>
  <li><a href="#">Products <span></span></a></li>
  <li><a href="#">Contact Us <span></span></a></li>
</ul>

这里有一些要注意的要点：必须添加一个空的span元素，以后它才可以用来作为当前选中元素的标识符。此外，需要为当前选中的元素添加current-page类。

第2步：基本CSS样式

下一步，我们需要添加基本的CSS样式，使导航栏呈现正确的外观：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

li {
  margin: 0 10px;
}

a {
  display: block;
  font-size: 18px;
  padding: 10px;
  position: relative;
}

img {
  border-radius: 50%;
  height: 20px;
  margin-right: 10px;
  width: 20px;
}

span {
  background-color: #000;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
}

.current-page {
  font-weight: bold;
  color: red;
}

这些样式定义了我们的列表和链接，为图像设定了样式，并定义了要用于指示当前选项的元素（span）。它也定义了要添加到当前选项的类（current-page）的样式。

第3步：激活当前选项的CSS

最后，当用户在导航栏中选择任何一个选项时，它必须被激活，以指示用户当前所在的页面。因此，我们需要添加一些CSS样式来指示当前选项。这个过程中用到了nth-of-type() CSS选择器实现：

li:nth-of-type(1) a .current-page {
  background-color: #f00;
}

li:nth-of-type(2) a .current-page {
  background-color: #0f0;
}

li:nth-of-type(3) a .current-page {
  background-color: #00f;
}

li:nth-of-type(4) a .current-page {
  background-color: #ff0;
}

在这个示例代码中，我们为每个选项的span 元素指定CSS样式，以便在用户单击一个选项时，对应的图像和文字颜色会发生变化。

示例1

在这个示例代码中，我们将添加一些hover效果，以使图像和链接在用户悬停时，发生变化：

a:hover img {
  border-radius: 0;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

a:hover {
  color: #f00;
}

在这个代码示例中，我们使用a:hover伪类选择器，来添加图像旋转和文字颜色变化的效果。

示例2

在这个示例中，我们将添加一个渐变的背景颜色，以使导航栏更加出彩：

ul {
  background-image: linear-gradient(45deg, #f00, #ff0, #0f0, #0ff, #00f);
  background-size: 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

在这个代码示例中，使用linear-gradient()函数为导航栏添加了一个渐变的背景颜色，使用了CSS动画，使背景颜色不断滚动。

结论

这篇教程提供了一个CSS样式的完整攻略，帮助我们创建带有当前标识的标签式横向导航图片美化版。在我们的攻略中，我们看到了如何使用法选择器、伪类选择器、CSS动画来丰富我们的CSS样式。在这个教程中，我们还提供了两个示例代码，可以作为练习使用。通过这些技巧和不断实践，你可以打造一个更漂亮的导航栏。