<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d {
height: 40px;
background: #337ccb;
}
li {
display: inline-block;
width: 60px;
line-height: 40px;
height: 40px;
color: white;
text-align: center;
border-color: red;
border-right: 1px solid #5893d2;
font-size: 18px;
}
li:hover {
background-color: #5893d2;
}
</style>
</head>
<body>
<div class="d">
<ul type="none">
<li>首页</li>
<li>歌单</li>
<li>动态</li>
<li>歌手</li>
<li>分类</li>
<li>榜单</li>
<li>MV</li>
<li>演出</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding 0px;
}
#box {
background: #337ccb;
}
#box_con {
height: 42px;
margin-left: 120px;
}
#box_con a {
text-decoration: none;
display: inline-block;
height: 42px;
line-height: 42px;
width: 82px;
color: #fff;
text-align: center;
border-right: 1px solid #5893d2 ;
}
a:hover {
background-color: #4790e0 ;
}
#mv {
width: 76px ;
}
</style>
</head>
<body>
<div id="box">
<div id="box_con">
<a href="#">首页</a><a href="#">歌单</a><a href="#">动态</a><a href="#">歌手</a><a href="#">分类</a><a href="#">榜单</a><a href="#" id="mv">MV</a><a href="#">演出</a>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hrbust</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
img {
border: none;
vertical-align: middle;
}
.nav {
background: #0d45b4;
}
.nav_con {
height: 40px;
width: 1200px;
margin: 0 auto;
}
li {
display: inline-block;
width: 105px;
height: 40px;
line-height: 40px;
text-align: center;
}
a {
color: white;
font-size: 16px;
}
#home {
width: 45px;
}
li:hover {
background: #4790e0;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav_con">
<ul>
<li id="home"><a href="#"><img src="C:/Users/Administrator/Desktop/home.jpg" alt="home"></a></li><li><a href="#">學校概況</a></li><li><a href="#">黨政機構</a></li><li><a href="#">教學單位</a></li><li><a href="#">招生就業</a></li><li><a href="#">科研產品</a></li><li><a href="#">學科建設</a></li><li><a href="#">圖書情報</a></li><li><a href="#">學生天地</a></li><li><a href="#">國際合作</a></li><li><a href="#">校友會</a></li><li><a href="#">基金會</a></li>
</ul>
</div>
</div>
</body>
</html>
