五彩导航代码（HTML）
warning:
这篇文章距离上次修改已过188天，其中的内容可能已经有所变动。
五彩导航代码是一种常见的网页导航样式，通常使用HTML和CSS来实现。以下是一个简单的五彩导航代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五彩导航</title>
<style>
ul.navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.navigation-item {
float: left;
}
li.navigation-item a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.navigation-item a:hover {
background-color: #555;
}
/* 五彩效果 */
.navigation-item:nth-child(1) a { background-color: #ff4d4d; }
.navigation-item:nth-child(2) a { background-color: #ffa84d; }
.navigation-item:nth-child(3) a { background-color: #9cff4d; }
.navigation-item:nth-child(4) a { background-color: #4dfaff; }
.navigation-item:nth-child(5) a { background-color: #4d4dff; }
</style>
</head>
<body>
<ul class="navigation">
<li class="navigation-item"><a href="#">首页</a></li>
<li class="navigation-item"><a href="#">新闻</a></li>
<li class="navigation-item"><a href="#">产品</a></li>
<li class="navigation-item"><a href="#">关于</a></li>
<li class="navigation-item"><a href="#">联系</a></li>
</ul>
</body>
</html>这段代码定义了一个带有五种不同背景颜色的导航栏，使用了CSS的伪类:hover来实现鼠标悬停时的效果，并使用了CSS伪类选择器:nth-child来为每个导航项指定不同的背景颜色。这是一个简洁而直观的导航样式实现，适合初学者学习和模仿。
评论已关闭