CSS怎么实现带有小图片的LI图标列表菜单-创新互联

这篇文章主要讲解了“CSS怎么实现带有小图片的LI图标列表菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS怎么实现带有小图片的LI图标列表菜单”吧！

创新互联公司秉承实现全网价值营销的理念，以专业定制企业官网，网站制作、网站设计，微信小程序定制开发，网页设计制作，手机网站制作，营销型网站帮助传统企业实现“互联网+”转型升级专业定制企业官网,公司注重人才、技术和管理，汇聚了一批优秀的互联网技术人才,对客户都以感恩的心态奉献自己的专业和所长。

这是一款带有小图片的Li列表菜单，竖向的图标菜单，鼠标放上会变色，对鼠标的响应很符合用户体验，且兼容性好，代码简洁，适宜学习和使用，CSS初学者的一个好范例。

运行效果截图如下：

CSS怎么实现带有小图片的LI图标列表菜单

在线演示地址如下：

http://demo.jb51.net/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怎么实现带有小图片的LI图标列表菜单”的内容了，经过本文的学习后，相信大家对CSS怎么实现带有小图片的LI图标列表菜单这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联网站建设公司，，小编将为大家推送更多相关知识点的文章，欢迎关注！

文章题目：CSS怎么实现带有小图片的LI图标列表菜单-创新互联
路径分享：https://www.cdcxhl.com/article46/dpophg.html

成都网站建设公司_创新互联，为您提供关键词优化、静态网站、服务器托管、企业网站制作、面包屑导航、做网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容