今天小编跟大家讲解下有关CSS实现带有小图片的LI图标列表菜单 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现带有小图片的LI图标列表菜单 的相关资料，希望小伙伴们看了有所帮助。
本文实例讲述了CSS实现带有小图片的LI图标列表菜单。分享给大家供大家参考。具体如下：
这是一款带有小图片的Li列表菜单 竖向的图标菜单 鼠标放上会变色 对鼠标的响应很符合用户体验 且兼容性好 代码简洁 适宜学习和使用 CSS初学者的一个好范例。
运行效果截图如下：
在线演示地址如下：
http://demo.aidi.net.cn/js/2015/css-small-pic-li-menu-codes/
具体代码如下：
复制代码代码如下:<!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图标菜单</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网页设计有所帮助。
来源：爱蒂网
