我设计了一个导航栏,但是了很多种方法都不能使之居中,请各位帮帮改改并说明问题所在,
另外还有一个问题(能回答就回答),我想使得用户当前所处的页面所对应的导航项目背景为一张图片(例如当前在 “首页”,那么“首页”的背景为一张图片),
当我跳转到“留言”时那么“留言”的背景设为图片,我的设想是为当前链接添加一个class(即下面的curent),请大家提供你们的思路,代码如下:
<style type="text/css">
body
{
text-align:center;
}
#linkBar
{
text-align:center;
}
#Nav
{
}
#Nav li
{
float:left;
list-style-type:none;
text-align:center;
}
#Nav li a
{
width:97px;
height:22px;
background-color:#666666;
color:#000000;
text-decoration:none;
display:block;
text-align:center;
padding-top:4px;
margin-left:2px;
}
#Nav li a:hover
{
background-color:#FF6600;
border:double;
}
.curent
{
background-image:url(../Image/link.jpg);
}
</style>
</head>
<body>
<div id="linkBar">
<ul id="Nav">
<li> <a href="" class="curent">首页 </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>
<style type="text/css">
body
{
text-align:center;
margin:0;padding:0;
}
#linkBar
{
position:relative;
margin:0 auto;
width:780px;
}
#Nav
{
width:780px;
float:left;
list-style-type:none;
}
#Nav li
{
float:left;
display:inline;
}
#Nav li a
{
width:97px;
height:22px;
background-color:#666666;
color:#000000;
text-decoration:none;
display:block;
padding-top:4px;
margin-left:2px;
}
#Nav li a:hover
{
background-color:#FF6600;
border:double;
}
.curent
{
background-image:url(../Image/link.jpg);
}
</style>
</head>
<body>
<div id="linkBar">
<ul id="Nav">
<li> <a href="" class="curent">首页 </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>
设置float:left;后,貌似居中就很难
1。 http://www.macji.com/2008/07/29/to-achieve-cross-browser-css-float-center/
2。 http://www.ddcat.net/blog/?p=823