首页 > Web开发 > 详细

html li标签前面添加图标三种方法

时间:2015-12-02 22:40:33      阅读:487      评论:0      收藏:0      [点我收藏+]

今天无聊写下这个例子,希望对初学者有帮助,代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome.min.css">
		<!--如果是IE7将自动加载这一句-->
		<!--[if IE 7]>
		<link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome-ie7.min.css">
		<![endif]-->
		<style type="text/css">
		body, div, ul, li {
			padding: 0px;
			margin: 0px;
			font-size: 15px;
		}
			.first {
				list-style: none;
				list-style-image: url("star.gif");
				padding-left: 20px;
			}
			.second li{
				list-style: none;
				background: url("star.gif") no-repeat;
				padding-left: 20px;
			}
			.third {
				list-style: none;
			}
		</style>
	</head>
	<body>
		<h2>第一种:list-style-image(图片)</h2>
		<ul class="first">
			<li>阿斯大法</li>
			<li>阿斯大法</li>
			<li>阿斯大法</li>
		</ul>
		<h2>第二种:backgroud(图片)</h2>
		<ul class="second">
			<li>阿斯大法</li>
			<li>阿斯大法</li>
			<li>阿斯大法</li>
		</ul>
		<h2>第三种:Font-Awesome-3.2.1(字体库)</h2>
		<ul class="third">
			<li><i class="icon-star"></i>阿斯大法</li>
			<li><i class="icon-star"></i>阿斯大法</li>
			<li><i class="icon-star"></i>阿斯大法</li>
		</ul>
	</body>
</html>

本人写的deme下载地址:http://download.csdn.net/detail/u010095549/9320861

效果如图:

技术分享

html li标签前面添加图标三种方法

原文:http://www.cnblogs.com/guxingzhe/p/5014233.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!