HTML和CSS標記爲精靈naivgation圖像

我試圖得到一個效果，我可以有圖片在所有從單一的精靈形象在左邊的菜單我的導航鏈接旁邊。我不確定我應該如何創建我的標記才能正確執行此操作。我希望整個圖片和文字可以點擊以訪問網址。

可能的解決方案

將圖像標記爲AHREF鏈接左側，並將其鏈接到同一個地方。
的AHREF鏈路上使用背景圖片的邊距，以騰出空間爲它
使用span標籤

代碼

<ul id="sidenav"> 
    <li><a href="#" title="Home" class="active">Dashboard</a></li> 
    <li><a href="#" title="Home">Dashboard</a></li> 
    <li><a href="#" title="Home">Dashboard</a></li> 
    <li><a href="#" title="Home">Dashboard</a></li> 
    <li><a href="#" title="Home">Account</a></li> 
</ul>

來源

2014-04-16 Jimmy

我覺得http://www.w3.org/wiki/CSS_background_images#Sprites答案你的問題。

他們使用的ID在<li> tag然後

#rss span{ background-position: -15px 0;} 

#photos span{background-position: -30px 0;} 

#links span{background-position: -45px 0;}

來源

2014-04-16 08:33:06 frountch

他們使用空跨度標籤，這真的是最好的方法？ – Jimmy

不知道是否有一個正確的方法，但我不明白爲什麼這個可能是壞的。 – frountch

您可以檢查這樣的引導方式..這裏是鏈接http://getbootstrap.com/components/

在那裏，你可以檢查自己做這件事情的方法。簡單地說，你可以做folloing

<ul id="sidenav"> 
    <li><a href="yourlink">Link text <span class="icon-class"></span></a></li> 
    </ul>

在圖標類定義從精靈圖像的位置。

來源

2014-04-16 08:33:48 Zeeshan

HTML和CSS標記爲精靈naivgation圖像

回答

相關問題