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

<!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标签前面添加图标三种方法的更多相关文章

  1. 三种方法为QLineEdit添加清除内容按钮

    很多时候我们会发现输入的一长串内容不得不全部删除重新输入,这时比起一直按着退格键不放一个清除内容按钮更受欢迎. 今天我将介绍三种为QLineEdit添加清除内容按钮的方法,其中两种方法有较强的功能针对 ...

  2. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  3. HOSt ip is not allowed to connect to this MySql server, MYSQL添加远程用户或允许远程访问三种方法

    HOSt ip is not allowed to connect to this MySql server 报错:1130-host ... is not allowed to connect to ...

  4. javascript生成新标签的三种方法

    javascript生成新标签的三种方法:http://www.cnblogs.com/online-link/p/6062423.html

  5. Ubuntu Linux系统三种方法添加本地软件库

    闲着没事教教大家以Ubuntu Linux系统三种方法添加本地软件库,ubuntu Linux使用本地软件包作为安装源——转2007-04-26 19:47新手重新系统的概率很高,每次重装系统后都要经 ...

  6. css - 三种方法解决LI和内部Img的上下间距问题

    在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和im ...

  7. mysql 中添加索引的三种方法

    原文:http://www.andyqian.com/2016/04/06/database/mysqleindex/ 在mysql中有多种索引,有普通索引,全文索引,唯一索引,多列索引,小伙伴们可以 ...

  8. Linux 添加开机启动项的三种方法

    linux 添加开机启动项的三种方法. (1)编辑文件 /etc/rc.local 输入命令:vim /etc/rc.local 将出现类似如下的文本片段: #!/bin/sh## This scri ...

  9. MYSQL添加远程用户或允许远程访问三种方法

    添加远程用户admin密码为password GRANT ALL PRIVILEGES ON *.* TO admin@localhost IDENTIFIED BY \'password\' WIT ...

随机推荐

  1. 基于bootstrap的datatable控件

    https://editor.datatables.net/release/DataTables/extras/Editor/examples/bootstrap.htmlhttps://github ...

  2. iphone开发中数据持久化之——嵌入式SQLite(三)

    前两篇分别讨论了使用属性列表的数据持久化.使用对象归档的数据持久化,本文将讨论第三个实现数据持久化的方法---嵌入式SQL数据库SQLite3.SQLite3在存储和检索大量数据方面非常有效.它还能够 ...

  3. (第三章)Java内存模型(下)

    一.happens-before happens-before是JMM最核心的概念.对于Java程序员来说,理解happens-before是理解JMM的关键. 1.1 JMM的设计 从JMM设计者的 ...

  4. Java基础知识强化48:Java中哈希码

    1.概念:      哈希其实只是一个概念,没有什么真实的指向.它的目的是保证数据均匀的分布到一定的范围内.所以不同数据产生相同的哈希码是完全可以的.      现在是站在JAVA虚拟机的角度来看内存 ...

  5. F# 既能解释执行,也能编译执行

    F# 除了是函数式语言和面向对象语言之外,还有个突出的特点是:既能解释执行,也能编译执行.   一般说来,一种语言只能选择其一种.比如说C++.C#是编译执行,不能解释执行,象Matlab.R是解释执 ...

  6. (转)巧用clear:both

    我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况,明明布局正确,但是整个画面却混乱起来了,有时候在IE6下看的很正常的,到ie7或者火狐下看时,就一片混乱了,无论怎么计 ...

  7. iOS 9 地图定位崩溃 n: 'Invalid parameter not satisfying: !stayUp || CLClientIsBackgroundable(internal->fClient)'

    报错详情: *** Assertion failure in -[CLLocationManager setAllowsBackgroundLocationUpdates:], /BuildRoot/ ...

  8. NOIP201504推销员

    #include<iostream> #include<cstring> #include<algorithm> #include<cmath> #in ...

  9. uva 10922 - 2 the 9s

    題目意思:讀取一數字,此數字最大有1000位.計算該數字是否為九的倍數?如是,再計算其階層數. ※判斷是否為九的倍數:所有位數相加 ÷ 9=0,即為九的倍數. ※計算階層數:所有位數相加後得出的第一個 ...

  10. PHP二维数组排序函数

    PHP一维数组的排序可以用sort(),asort(),arsort()等函数,但是PHP二维数组的排序需要自定义. 以下函数是对一个给定的二维数组按照指定的键值进行排序,先看函数定义: functi ...