哪位高手能给个改变导航条背景的代码
日期：2014-05-17 浏览次数：20884 次
谁能给个改变导航条背景的代码？
在网上找了很久，一些现成的都是用JS+css来实现的,我不想用JS，能不能用CSS来实现呢？我想实现的效果如下：
1、导航条默认情况下就只有一个背景色或图片
2、鼠标移动到导航条一个栏目时显示另外一种颜色或图片
3、点击栏目后当前栏目的背景颜色或图片和鼠标移动上去的时候是一个颜色，其余栏目还是默认情况之下的颜色
看了很多CSS代码，无奈我是个新手，而且都是自学的，还望各位大侠来帮帮我，再次感谢！！
------解决方案--------------------
谁说不能实现啊？？？如果不是在低版本的IE中 可以使用伪类。比如你的导航条是用li做的；li:hover {background:red;}li:active{background:green;}----楼主可以来站内信 但是为了你 你最好去搜索一下css伪类 对你有好处
------解决方案--------------------
hi、我随便用css实现的，你查看一下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0; padding:0;}
.clear{clear:both;}
ul{margin:15px;background:#494949;border:1px solid transparent; border-radius:5px; background:-moz-linear-gradient(top, #494949, #919191); background:-webkit-linear-gradient(top, #494949, #919191);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#919191'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#919191')";}
.currpage a.btn_gray:hover,.view_type .currpage a.btn_gray:active{background:#494949; background:-moz-linear-gradient(top, #494949, #919191); background:-webkit-linear-gradient(top, #494949, #919191);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#919191'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#919191')";padding:3px 8px; display:block; }
ul li{list-style:none; margin-right:8px;display:inline-block;}
ul li a{color:#fff; text-decoration:none; padding:10px 15px;display:inline-block;}
ul li a:hover{ background:-moz-linear-gradient(top, #79868D, #9EC39C); background:-webkit-linear-gradient(top, #79868D, #9EC39C);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79868D', endColorstr='#9EC39C'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#9EC39C')";}
.currpage a.btn_gray:hover,.view_type .currpage a.btn_gray:active{background:#79868D; background:-moz-linear-gradient(top, #79868D, #9EC39C); background:-webkit-linear-gradient(top, #79868D, #9EC39C);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79868D', endColorstr='#9EC39C'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#79868D', endColorstr='#9EC39C')";}
</style>
</head>
<body>
<div>
<ul class="clear">
<li><a href="#">我的主题1</a></li>
<li><a href="#">我的主题1</a></li>
<li><a href="#">我的主题1</a></li>
<li><a href="#">我的主题1</a></li>
<li><a href="#">我的主题1</a></li>
<li><a href="#">我的主题1</a></li>
</ul>
</div>
</body>
</html>
在网上找了很久，一些现成的都是用JS+css来实现的,我不想用JS，能不能用CSS来实现呢？我想实现的效果如下：
1、导航条默认情况下就只有一个背景色或图片
2、鼠标移动到导航条一个栏目时显示另外一种颜色或图片
3、点击栏目后当前栏目的背景颜色或图片和鼠标移动上去的时候是一个颜色，其余栏目还是默认情况之下的颜色
看了很多CSS代码，无奈我是个新手，而且都是自学的，还望各位大侠来帮帮我，再次感谢！！
------解决方案--------------------
谁说不能实现啊？？？如果不是在低版本的IE中 可以使用伪类。比如你的导航条是用li做的；li:hover {background:red;}li:active{background:green;}----楼主可以来站内信 但是为了你 你最好去搜索一下css伪类 对你有好处
------解决方案--------------------
hi、我随便用css实现的，你查看一下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0; padding:0;}
.clear{clear:both;}
ul{margin:15px;background:#494949;border:1px solid transparent; border-radius:5px; background:-moz-linear-gradient(top, #494949, #919191); background:-webkit-linear-gradient(top, #494949, #919191);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#919191'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#919191')";}
.currpage a.btn_gray:hover,.view_type .currpage a.btn_gray:active{background:#494949; background:-moz-linear-gradient(top, #494949, #919191); background:-webkit-linear-gradient(top, #494949, #919191);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#919191'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#919191')";padding:3px 8px; display:block; }
ul li{list-style:none; margin-right:8px;display:inline-block;}
ul li a{color:#fff; text-decoration:none; padding:10px 15px;display:inline-block;}
ul li a:hover{ background:-moz-linear-gradient(top, #79868D, #9EC39C); background:-webkit-linear-gradient(top, #79868D, #9EC39C);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79868D', endColorstr='#9EC39C'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#9EC39C')";}
.currpage a.btn_gray:hover,.view_type .currpage a.btn_gray:active{background:#79868D; background:-moz-linear-gradient(top, #79868D, #9EC39C); background:-webkit-linear-gradient(top, #79868D, #9EC39C);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79868D', endColorstr='#9EC39C'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#79868D', endColorstr='#9EC39C')";}
</style>
</head>
<body>
<div>
<ul class="clear">
<li><a href="#">我的主题1</a></li>
<li><a href="#">我的主题1</a></li>
<li><a href="#">我的主题1</a></li>
<li><a href="#">我的主题1</a></li>
<li><a href="#">我的主题1</a></li>
<li><a href="#">我的主题1</a></li>
</ul>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
