CSS3-综合案例2-五色导航

/* 设置基本的HTML元素样式 */
html, body, h1, h2, h3, h4, h5, h6, div, p, ul, li, a {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}
 
/* 设置整个页面的背景 */
body {
    background: #f0f0f0 url('../img/bg_pattern.png') repeat;
}
 
/* 设置导航栏的基本样式 */
nav ul {
    list-style: none;
    background-color: #333;
}
 
/* 设置导航栏中的链接样式 */
nav ul li {
    float: left;
    width: 20%;
    text-align: center;
}
 
/* 设置导航栏中的链接颜色和背景颜色 */
nav ul li a {
    display: block;
    line-height: 50px; /* 设置行高以垂直居中文本 */
    color: white;
    text-decoration: none;
    background-color: #555; /* 默认的背景颜色 */
}
 
/* 设置鼠标悬停在导航链接上的样式 */
nav ul li a:hover {
    background-color: #777; /* 鼠标悬停时的背景颜色 */
}
 
/* 设置不同导航栏状态下的五种颜色 */
nav ul li a.color1:link,
nav ul li a.color1:visited {
    background-color: #ef4836; /* 红色 */
}
 
nav ul li a.color1:hover {
    background-color: #c32c1a; /* 红色 */
}
 
nav ul li a.color2:link,
nav ul li a.color2:visited {
    background-color: #f57900; /* 橙色 */
}
 
nav ul li a.color2:hover {
    background-color: #e75403; /* 橙色 */
}
 
nav ul li a.color3:link,
nav ul li a.color3:visited {
    background-color: #3498db; /* 蓝色 */
}
 
nav ul li a.color3:hover {
    background-color: #297fb1; /* 蓝色 */
}
 
nav ul li a.color4:link,
nav ul li a.color4:visited {
    background-color: #1abc9c; /* 绿色 */
}
 
nav ul li a.color4:hover {
    background-color: #16a085; /* 绿色 */
}
 
nav ul li a.color5:link,
nav ul li a.color5:visited {
    background-color: #9b59b6; /* 紫色 */
}
 
nav ul li a.color5:hover {
    background-color: #8e44ad; /* 紫色 */
}

这段代码为导航栏中的链接提供了不同的颜色，当用户用鼠标悬停在链接上时，链接的背景颜色会变深，从而为用户提供更好的视觉反馈。代码中使用了CSS选择器的优先级来确定链接的默认颜色和悬停颜色。这是一个简单的导航栏样式设计，但是在实际应用中可以根据需要添加更多的样式和动画效果。