我想用图像替换列表项。
我要替换的列表项是第一个列表项 class="main-logo"。
我的问题如下。
1.我是在.main-logo还是.logo上进行更换？2.用图像替换列表项的最佳技术是什么？3. 如果我想调整列表项的行高，我是调整li 类、nav 类还是a 类？
谢谢！
http://jsfiddle.net/codermax/fe0L3d08/4/
<nav class = "side-bar">
<ul class ="main-bar">
<li class="logo"><a href="#" class="main-logo">Logo</a></li>
<li class="user-nav"><a href="#" class="big-box">User</a></li>
<li class="main-nav"><a href="#">Home</a></li>
<li class="main-nav"><a href="#">Visitor List</a></li>
<li class="main-nav"><a href="#">Visualization</a></li>
<li class="main-nav"><a href="#">History</a></li>
<li class="divider-nav"><a href="#">Manage</a></li>
<li class="manage-nav"><a href="#">Agents</a></li>
<li class="manage-nav"><a href="#">Departments</a></li>
<li class="manage-nav"><a href="#">Shortcuts</a></li>
<li class="manage-nav"><a href="#">Banned Visitors</a></li>
<li class="manage-nav"><a href="#">Triggers</a></li>
<li class="divider-nav"><a href="#">Settings</a></li>
<li class="settings-nav"><a href="#">Widgets</a></li>
<li class="settings-nav"><a href="#">Personal</a></li>
<li class="settings-nav"><a href="#">Accounts</a></li>
</ul>
</nav>
CSS 代码。
.main-bar li a {
display: block;
width: 100%;
height: 100%;
padding: auto 0;
margin: auto 0;
line-height: 2.5em;
text-decoration: none;
color: white;
text-align: center;
}
article {
width: 60%;
height: 30%;
float: right;
position: relative;
}
.logo {
height: 4em;
}
a.main-logo {
background: url(zopim.jpg) no-repeat;
display: block;
height: 100%;
top: 0;
left: 0;
}
a.big-box {
line-height: 7em;
height: 7em;
}