a:link{}//未被访问过的链接
a:hover{}//鼠标位于其上的链接
a:visited{}//已经被访问过的链接
a:active{}// 选择活动链接
例子一：
导航背景色为#0ADDF3； 选中后背景色为#04A7CD；鼠标滑过显示颜色#3BB7EF；
html：
<div class="nav">
<div class="nav-1">
<input type="radio" name="jl" value="shouye" id="st-nav-1" checked="checked">
<a href="#st-nav1-1">首页</a>
<input type="radio" name="jl" value="denglu" id="st-nav-2">
<a href="#st-nav1-2">登录</a>
<input type="radio" name="jl" value="zhuce" id="st-nav-3">
<a href="#st-nav1-3">注册</a>
<input type="radio" name="jl" value="aboutme" id="st-nav-4">
<a href="#st-nav1-4">联系我们</a>
</div>
</div>
css：
<style type="text/css">
*{
margin: 0;
padding:0;
}
.nav-1 > input, .nav-1 >a {
25%;
height: 50px;
line-height: 50px;
position: fixed;
top: 0;
cursor: pointer;
}
.nav-1 input{
opacity: 0;
z-index: 1000;
}
.nav-1 a{
text-align: center;
text-decoration: none;
color: #fff;
z-index: 10;
font-weight: 700;
background:rgb(4, 226, 244);
text-shadow: 1px 1px 1px rgba(251,3,3,0.5)
}
#st-nav-1 , #st-nav-1+a{
left: 0%;
}
#st-nav-2 ,#st-nav-2+a{
left: 25%;
}
#st-nav-3,#st-nav-3+a{
left: 50%;
}
#st-nav-4,#st-nav-4+a{
left: 75%;
}
.nav-1 input:checked+a, .nav-1 input:checked:hover+a{
background:rgb(4, 167, 205);
}
.nav-1 input:hover+a{
background:rgb(64, 179, 239);
}
.nav-1 input:checked + a:after{
content: "";
0;
height: 0;
overflow: hidden;
border:20px solid transparent;
border-top-color:rgb(4, 167, 205);
position: absolute;
top:100%;
left: 50%;
margin-left: -20px;
}
</style>
例子二：
html：
<div id="nav" >
<ul class="nav-1">
<li class="li1"><a href="#">首页</a></li>
<li><a href="#one">动态</a></li>
<li><a href="#two">相册</a></li>
</ul>
</div>
css：
<style type="text/css">
ul,li{
list-style: none;
float: left;
padding-left: 50px;
margin-top: 0;
}
li{
100px;
height: 50px;
line-height: 50px;
}
a{
text-decoration: none;
color: #fff;
font-weight: 700;
}
#nav{
background:rgb(72, 187, 237);
height: 50px;
}
.li1{
background: red;
font-weight: 800;
}
</style>
这个案例需要用到js来实现，导航的html语句不同
添加了js后：
<body>
<div id="nav" >
<ul class="nav-1">
<li class="li1"><a href="#">首页</a></li>
<li><a href="#one">动态</a></li>
<li><a href="#two">相册</a></li>
</ul>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script>
$("#nav .nav-1 li").click(function(){
$("#nav .nav-1 li").removeClass("li1");
$(this).addClass("li1");
})
</script>
</body>