html li標簽前面添加圖標三種方法
阿新 • • 發佈:2018-06-16
code ie7 first tar some text 20px AI 前端
今天無聊寫下這個例子,希望對初學者有幫助,代碼如下
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.csdn.net/detail/u010095549/9320861
效果如圖:
歡迎加入,Java,前端的共同學習【愛問共享編程部落】 479668591
html li標簽前面添加圖標三種方法