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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<! 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.youkuaiyun.com/detail/u010095549/9320861

效果如图：

 

欢迎加入，Java，前端的共同学习【爱问共享编程部落】 479668591