首页 新闻 搜索 专区 学院

谁能帮忙把这个导航条效果扣下现啊?

0
悬赏园豆:20 [已解决问题] 解决于 2012-03-20 09:55
草根程序猿的主页 草根程序猿 | 初学一级 | 园豆:129
提问于:2012-03-20 09:22
< >
分享
最佳答案
0

完整代码:

<!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>

在线演示效果:简洁漂亮的横向导航

收获园豆:15
artwl | 专家六级 |园豆:16536 | 2012-03-20 09:41

谢谢

草根程序猿 | 园豆:129 (初学一级) | 2012-03-20 09:48
其他回答(1)
0

你看一下他的原码,把他的html拷贝出来。然后,把css拿出来,放一起就好了哦。

收获园豆:5
無限遐想 | 园豆:3740 (老鸟四级) | 2012-03-20 09:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册