您的位置：首页 > 其它

狂人日记学习之十一简单横向导航

2007-01-04 20:07 344 查看

一般css排版会采用ul + a 的方式实现，css代码如下：

<style>

#header{
width:802px;
height:98px;
background:url(img/headerbg.gif);
}
#nav {
height:26px;
list-style:none;
float:right;
margin-top:72px;
}
#nav li{
float:left;
font-size:14px;
font-weight:bold;
}
#nav li a{
color:#FFFFFF;
text-decoration:none;
padding-top:7px;
display:block;
width:97px;
height:19px;
text-align:center;
background:url(img/nav.gif);
margin-left:2px;
}
#nav li a:hover{
background:url(img/nav.gif);
background-position:0px -26px;
color:#FFFFFF;
}
#nav li a#current{
background:url(img/nav.gif);
background-position:0px -52px;
color:#000000;
}
</style>

</head>

<body>

<div id="header">
<ul id="nav">
<li><a href="#" id="current">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">参考</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

狂人日记学习 之十一 简单横向导航

狂人日记学习之十一简单横向导航