CSS實現(xiàn)帶有小圖片的LI圖標(biāo)列表菜單
發(fā)布時間：2015-09-15 16:40:58 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了CSS實現(xiàn)帶有小圖片的LI圖標(biāo)列表菜單,可實現(xiàn)css圖標(biāo)的正常顯示及滑過、點擊呈現(xiàn)不同顏色的功能,涉及css針對visited、hover及active等使用技巧,需要的朋友可以參考下
本文實例講述了CSS實現(xiàn)帶有小圖片的LI圖標(biāo)列表菜單。分享給大家供大家參考。具體如下：
這是一款帶有小圖片的Li列表菜單，豎向的圖標(biāo)菜單，鼠標(biāo)放上會變色，對鼠標(biāo)的響應(yīng)很符合用戶體驗，且兼容性好，代碼簡潔，適宜學(xué)習(xí)和使用，CSS初學(xué)者的一個好范例。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/css-small-pic-li-menu-codes/
具體代碼如下：
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS圖標(biāo)菜單</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="#">聯(lián)系我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">購買我們</a></li>
</ul>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS圖標(biāo)菜單</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="#">聯(lián)系我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">購買我們</a></li>
</ul>
</body>
</html>
希望本文所述對大家的CSS網(wǎng)頁設(shè)計有所幫助。
相關(guān)文章
- 這是一個很簡單的教程,主要教你怎么用list的邊框樣式和背景圖像來創(chuàng)建一個菜單出來.技巧在于使用list的相對定位,來轉(zhuǎn)移邊框的位置.2009-11-30
UL、LI 無序列表實現(xiàn)純CSS網(wǎng)站導(dǎo)航菜單
三行的純CSS網(wǎng)站導(dǎo)航欄菜單，改改風(fēng)格，讓大家感到新鮮一點，其它主要還是使用了Li列表，整體布局簡潔，美觀大方，適合大部分網(wǎng)站使用，顏色和菜單空隙可隨意調(diào)節(jié)，希望大2009-11-08- 網(wǎng)頁制作Webjx文章簡介：不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn)，繼class和div被濫用后，ul列表也有被不正確使用的趨勢。 今天交流會上，分享前端的開發(fā)經(jīng)2009-04-02
CSS3實現(xiàn)帶小圖標(biāo)的飄帶狀3D菜單源碼
這次我們要來分享一款很特別的CSS3菜單，菜單的外觀是飄帶狀的，并且每一個菜單項有一個精美的小圖標(biāo)，鼠標(biāo)滑過菜單項時，菜單項就會向上凸起，像是飄帶飄動一樣，形成非常2014-12-26
純CSS3實現(xiàn)的帶小圖標(biāo)和tooltip提示框的垂直下拉菜單效果源碼
這是一款效果非常不錯的CSS3垂直下拉菜單，菜單左側(cè)是每一個菜單項的功能小圖標(biāo)，右側(cè)也可以定義一些數(shù)字小圖標(biāo)，并且在菜單項最右側(cè)是tooltip的樣式2014-11-07
純CSS3實現(xiàn)的帶小圖標(biāo)垂直動畫菜單效果源碼 效果很酷
今天我們來分享一款CSS3垂直菜單，這款垂直菜單不僅有漂亮的小圖標(biāo)，而且鼠標(biāo)滑過時還有非?？岬腃SS3動畫，大家可以試試這款CSS3垂直菜單2014-11-07
一款精美清新的CSS3小圖標(biāo)菜單導(dǎo)航，鼠標(biāo)滑過有切換的動畫效果2014-06-25
純CSS3實現(xiàn)的迷你圖標(biāo)導(dǎo)航菜單效果(無js)
純CSS3實現(xiàn)迷你圖標(biāo)導(dǎo)航菜單效果，不使用任何js代碼，清新簡潔2013-04-26CSS實例：創(chuàng)建有圖標(biāo)的網(wǎng)站導(dǎo)航菜單
網(wǎng)頁制作Webjx文章簡介：在我創(chuàng)建的每一個互聯(lián)網(wǎng)應(yīng)用中，我都試圖避免創(chuàng)建完全由圖片組成的菜單。在我看來，菜單系統(tǒng)中應(yīng)該使用文字。這樣做也會讓菜單變得更干凈利落、清2009-04-02
