完整代码:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8"/>
<style type="text/css">
body {
font-family: Lucida Grande, Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
}
a {
color: #3D85BB;
text-decoration: none;
outline: none;
border: none;
margin: 0px;
}
a:visited {
text-decoration: none;
border: none;
margin: 0px;
}
#texturedheader {
background-image: url(http://timkloote.com/images/texturedbg.jpg);
width: 1169px;
margin-right: auto;
margin-left: auto;
height: 225px;
}
#wrapper {
width: 625px;
float: right;
margin-top: 15px;
}
#nav, ul#nav li {
float: left;
}
#nav, ul#nav li {
float: left;
}
ul#nav li {
list-style-type: none;
background-repeat: no-repeat;
overflow: hidden;
margin-right: 5px;
}
ul#nav li a {
display: block;
width: 110px;
height: 40px;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
font-weight: normal;
text-decoration: none;
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 16px;
font-style: normal;
text-shadow: 0px 2px 2px black;
overflow: hidden;
}
ul#nav li#active a {
color: white;
background-image: url(http://timkloote.com/images/active.png);
background-repeat: no-repeat;
background-position: center top;
}
ul#nav li a:hover {
color: #fff;
font-style: normal;
font-weight: normal;
background-image: url(http://timkloote.com/images/hover.png);
background-repeat: no-repeat;
background-position: center top;
overflow: visible;
}
ul#nav li a:active {
position: relative;
top: 2px;
}
ul#nav li#active a {
color: #FFF;
background-image: url(http://timkloote.com/images/active.png);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<div id="texturedheader">
<div id="wrapper">
<ul id="nav">
<li id="active"> <a href="#">Home</a></li>
<li> <a href="#">About</a></li>
<li> <a href="#">Blog</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
在线演示效果:简洁漂亮的横向导航
谢谢
你看一下他的原码,把他的html拷贝出来。然后,把css拿出来,放一起就好了哦。