html li標簽前面添加圖標三種方法


今天無聊寫下這個例子,希望對初學者有幫助,代碼如下

<!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

效果如圖:

 

歡迎加入,Java,前端的共同學習【愛問共享編程部落】 479668591


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM