萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS實現帶有小圖片的LI圖標列表菜單代碼介紹
CSS實現帶有小圖片的LI圖標列表菜單代碼介紹
我們為大家收集整理了關於CSS實現帶有小圖片的LI圖標列表菜單代碼，以方便大家參考。
<head>
<title>CSS圖標菜單</title>
<style>
ul#nav {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav a:link, #nav a:visited {
display: block;
width: 150px;
padding: 10px 0 16px 32px;
font: bold 80% Arial, Helvetica, sans-serif;
color: #FF9900;
background: url("images/peppers.gif") top left no-repeat;
text-decoration: none;
}
#nav a:hover {
background-position: 0 -69px;
color: #B51032;
}
#nav a:active {
background-position: 0 -138px;
color: #006E01;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">我們</a></li>
<li><a href="#">聯系我們</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">購買我們</a></li>
</ul>
</body>
</html>
希望大家可以學會CSS實現帶有小圖片的LI圖標列表菜單代碼.想了解更多精彩內容，請關注我們的網站!
相關推薦：
CSS實現的中英文雙語菜單效果代碼介紹
DivCSS教程排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved