<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<style>
body, ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
body {
background-color: #23232f;
padding: 20px;
}
.nav {
background: #0f0f14 url(img/navL.png) no-repeat;
float: left;
}
.nav .navR {
background: url(img/navR.png) no-repeat right 0;
float: left;
padding: 4px 4px 0 3px;
}
.nav .navR li {
float: left;
padding-left: 1px;
}
.nav .navR li a {
float: left;
background: url(img/btnM.png) no-repeat;
}
.nav .navR li a span {
float: left;
background: url(img/btnR.png) no-repeat right 0;
height: 31px;
font-size: 14px;
line-height: 30px;
padding: 0 18px;
color: #fff;
}
/*默認選中樣式*/
.nav .navR li a:hover, .nav .navR li a.active {
background: url(img/hoverL.png) no-repeat;
}
.nav .navR li a:hover span, .nav .navR li a.active span {
background: url(img/hoverR.png) no-repeat right 0;
}
</style>
<body>
<div class="nav">
<ul class="navR">
<li><a href="#" class="active"><span>主頁</span></a></li>
<li><a href="#"><span>博客</span></a></li>
<li><a href="#"><span>關於</span></a></li>
</ul>
</body>
</html>
![]()
