0
我想用圖像替換列表項目。用圖像替換列表項目
我希望替換的列表項是第一個列表項class =「main-logo」。
我的問題如下。
1.我是否在.main-logo或.logo上進行替換？ 2.用圖像替換列表項目的最佳技術是什麼？ 3.如果我想調整列表項的行高，我是否調整li類，nav類或一個類？
謝謝！
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;
}