简单导航示例
- 效果
源码：
-------------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>导航-换肤</title>
<style>
*{padding:0px;margin:0px;}
a{text-decoration:none;}
body{font:14px "微软雅黑";/*font-family:"微软雅黑";font-size:14px;*/}
#wrap{width:1200px;margin:100px auto;background:#141414;height:50px;}
#left{width:250px;height:50px;background:linear-gradient(90deg,#FF4A00,#6FBE6A);
float:left;text-align:center;line-height:50px;font-size:20px;color:#fff}
#left span:before{content:"★"}
#right{height:50px;background:#404144;float:left;width:950px;}
#right .items{width:90px;display:inline-block;height:50px;line-height:50px;
text-align:center;font-size:18px;color:#fff;padding-left:1px;transition:all 0.3s ease;position:relative;}
#right .items:hover{background:#333;transition:all 0.3s ease;}
#right .items:hover i{
border-top:6px solid transparent;
border-right:6px solid transparent;
border-bottom:6px solid #fff;
border-left:6px solid transparent;
display:inline-block;
position:absolute;/*站着位置*/
top:38px;
left:36px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"><span>全部商品分类</span></div>
<div id="right">
<a href="#" class="items">首页<i></i></a>
<a href="#" class="items">米聊 <i></i></a>
<a href="#" class="items">游戏<i></i></a>
<a href="#" class="items">多看阅读<i></i></a>
<a href="#" class="items">云服务<i></i></a>
<a href="#" class="items">小米网移<i></i></a>
<a href="#" class="items">Love<i></i></a>
<a href="#" class="items">Much<i></i></a>
<a href="#" class="items">Phone<i></i></a>
<a href="#" class="items">Java<i></i></a>
</div>
</div>
<a href="javascript:void(0);" onclick="changeColor()">换肤</a>
<script type="text/javascript">
function changeColor(){
var rcolor = getRandomColor();
var lcolor = getRandomColor();
document.getElementById("left").style.background= lcolor;
document.getElementById("right").style.background= rcolor;
};
//定时切换皮肤
setInterval(function(){
changeColor();
},3000);
//这是获取一个随机的十六进制颜色
function getRandomColor(){
return ‘#‘+Math.floor(Math.random()*16777215).toString(16);
}
</script>
</body>
</html>