css构建两个简单的导航栏
第一个导航栏
效果:
![](https://img-my.csdn.net/uploads/201211/29/1354158430_7593.png)
当鼠标移动到上面的时候,对应的颜色改变
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>荧光灯效果的菜单</title>
<style type="text/css">
a{
text-decoration:none;
display:block;
width:120px;
}
a:link,a:visited{
border:1px solid #999;
border-top:solid 10px #999;
background-color:#666;
color:#CCC;
}
a:hover{
border-top:solid 10px #CF9;
color:yellow;
}
</style>
</head>
<body>
<a href="#1">主页</a>
<a href="#2">科技频道</a>
<a href="#3">时尚频道</a>
<a href="#$">教育频道</a>
</body>
</html>
简要分析:主要是通过<a>标签的伪类实现的,当鼠标移动到上面的时候,就改变<a>标签边框的上边框的颜色和字体的颜色.道理很简单,但效果还是不错的.
第二个导航栏
效果:
当鼠标移动到上面,相应颜色改变,并且缩进.
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创建简单的导航栏</title>
<style type="text/css">
a,a:visited,a:active{
display:block;
text-decoration:none;
border-left:#000 solid 5px;
margin:2px;
width:120px;
background-color:#666;
}
a:hover{
border-left:#9CC solid 5px;
margin-left:10px;
}
</style>
</head>
<body>
<a href="#1">主页</a>
<a href="#2">科技频道</a>
<a href="#3">时尚频道</a>
<a href="#4">教育频道</a>
</body>
</html>
简要分析:这和上面的例子的原理是一样的,都是通过<a>标签的伪类实现,当鼠标移动到上面左边框颜色改变,增加左margin.