仿imooc网导航，还有点小bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
*{
margin: 0px;padding: 0px;
}
div {
display: block;
}
a{
text-decoration: none;
}
ul li{
list-style: none;
float: left;
display: block;
}
#header{
background: #000000;
}
#nav{
width: 1200px;
height: 60px;
margin: 0px auto;
position:relative
}
#nav a{
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
#nav .logo{
float: left;
}
#nav .logo a{
background: url(http://static.mukewang.com/static/img/common/logo.png) no-repeat center center;
width: 140px;
height: 60px;
overflow: hidden;
display: block;
}
.nav-item{
height: 60px;
width: 300px;
position: absolute;
left: 140px;
}
.nav-item a{
display: block;
color: #787d82;
text-align: center;
font-size: 14px;
height: 60px;
line-height: 60px;
}
.nav-item li{
width: 100px;
float: left;
}
li :hover{
background-color: #363C41;
color: #F8F8F2;
}
#login-area {
float: right;
position: relative;
}
#login-area li{
width: 60px;
height: 60px;
}
#login-area li :hover{
background-color: #363C41;
color: #F8F8F2;
}
.my_message a{
display: block;
height: 60px;
line-height: 60px;
width: 60px;
color: #787d82;
text-align: center;
background:url(http://static.mukewang.com/static/img/icon_msg.png) no-repeat center center;
}
.my_mp {
height: 60px;
width: 60px;
}
.my_mp a{
height: 60px;
width: 60px;
display: block;
}
.my_mp .mp {
padding-top: 12px;
font-size: 12px;
}
.my_mp span {
display: block;
line-height: 16px;
color: #6c7072;
}
.my_mp a{
text-align: center;
}
.set_btn{
position: relative;
}
.set_btn img {
border-radius: 22px;
border: 2px solid #adb0b1;
vertical-align: middle;
display: inline-block;
background: url(ttp://static.mukewang.com/static/img/menu_icon.png) no-repeat 0 0;
}
.set_btn a {
display: block;
height: 60px;
line-height: 60px;
width: 60px;
color: #787d82;
text-align: center;
}
li:hover #nav_list{
display: block;
}
#nav_list :hover .set_btn a{
background: #363C41;
}
#nav_list{
position:absolute;
margin-left:-100px;
background: #363C41;
display: none;
}
#nav_list li{
height: 39px;
width: 160px;
color: #F8F8F2;
}
#nav_list li a:hover{
}
#nav_list li a{
border-top: 1px solid #4a5153;
height: 39px;
line-height: 39px;
font-size: 14px;
background-image: url(http://static.mukewang.com/static/img/menu_icon.png);
background-repeat: no-repeat;
display: block;
color: #fff;
text-align: left;
padding: 0;
padding-left: 47px;
width: auto;
}
#nav_list #my_setting {
background-position: 19px -167px;
}
#nav_list #logout {
background-position: 19px -207px;
}
#search-area {
float: right;
position: relative;
height: 30px;
width: 240px;
margin: 15px 0;
margin-right: 20px;
background: #363c41;
}
*:focus{outline: none;}
#search-area #search-input {
padding: 5px 10px;
width: 190px;
height: 20px;
line-height: 20px;
font-size: 12px;
float: left;
border: 0;
border-style: none;
background: #363c41;
color: #14191e;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
transition: background-color 0.3s;
}
#search-area #search-btn{
background: url(http://static.mukewang.com/static/img/gsearch-sprite.png) no-repeat 0 0;
float: right;
cursor: pointer;
width: 30px;
height: 30px;
border: 0;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
transition: background-color 0.3s;
}
</style>
<script type="text/javascript">
function mOut(obj) {
var sbta=document.getElementById('set_btn');
sbta.style.backgroundColor="#000000";
}
function mOn(obj) {
var sbta=document.getElementById('set_btn');
sbta.style.backgroundColor="#363C41";
}
function myonfocus() {
document.getElementById('search-input').style.backgroundColor="#FFFFFF";
document.getElementById('search-btn').style.background="url(http://static.mukewang.com/static/img/gsearch-sprite.png) no-repeat 0 -40px";
document.getElementById('search-btn').style.backgroundColor="#FFFFFF";
}
function myonblur() {
document.getElementById('search-input').style.backgroundColor="#363C41";
document.getElementById('search-btn').style.background="url(http://static.mukewang.com/static/img/gsearch-sprite.png) no-repeat 0 0";
document.getElementById('search-btn').style.backgroundColor="#363C41";
}
</script>
</head>
<body>
<div id="header">
<div id="nav">
<div id="logo" class="logo">
<a href="" class=""></a>
</div>
<ul class="nav-item">
<li>
<a href="">课程</a>
</li>
<li>
<a href="">问答</a>
</li>
<li>
<a href="">我的课程</a>
</li>
</ul>
<div id="login-area">
<ul>
<li class="my_message">
<a href=""></a>
</li>
<li class="my_mp" >
<a href="" title="我的经验">
<span class="mp">经验</span>
<span class="mp_num">3356</span>
</a>
</li>
<li class="set_btn" id="set_btn">
<a href="">
<img src="" width="40" height="40"> <i class=""></i>
<span></span>
</a>
<ul id="nav_list" style="float:none" onmouseover ="mOn(this)" onmouseout ="mOut(this)">
<li>
<a id="my_space"href="">昵称</a>
</li>
<li>
<a id="my_setting" href="">我的设置</a>
</li>
<li>
<a id="logout" href="">退出</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="search-area">
<form action="">
<input type="text" id="search-input" placeholder="搜索课程、问答" onfocus="myonfocus()" onblur="myonblur()">
<input type="button" id="search-btn"></form>
</div>
</div>
</div>
</body>
</html>
818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
