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

效果如图：

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

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

html li标签前面添加图标三种方法的更多相关文章

三种方法为QLineEdit添加清除内容按钮
很多时候我们会发现输入的一长串内容不得不全部删除重新输入,这时比起一直按着退格键不放一个清除内容按钮更受欢迎. 今天我将介绍三种为QLineEdit添加清除内容按钮的方法,其中两种方法有较强的功能针对 ...
服务器文档下载zip格式 SQL Server SQL分页查询 C&num;过滤html标签 EF 延时加载与死锁在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题不吹不擂，你想要的Python面试都在这里了【315+道题】基于mvc三层架构和ajax技术实现最简单的文件上传事件管理
服务器文档下载zip格式刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
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 ...
javascript生成新标签的三种方法
javascript生成新标签的三种方法:http://www.cnblogs.com/online-link/p/6062423.html
Ubuntu Linux系统三种方法添加本地软件库
闲着没事教教大家以Ubuntu Linux系统三种方法添加本地软件库,ubuntu Linux使用本地软件包作为安装源——转2007-04-26 19:47新手重新系统的概率很高,每次重装系统后都要经 ...
css - 三种方法解决LI和内部Img的上下间距问题
在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和im ...
mysql 中添加索引的三种方法
原文:http://www.andyqian.com/2016/04/06/database/mysqleindex/ 在mysql中有多种索引,有普通索引,全文索引,唯一索引,多列索引,小伙伴们可以 ...
Linux 添加开机启动项的三种方法
linux 添加开机启动项的三种方法. (1)编辑文件 /etc/rc.local 输入命令:vim /etc/rc.local 将出现类似如下的文本片段: #!/bin/sh## This scri ...
MYSQL添加远程用户或允许远程访问三种方法
添加远程用户admin密码为password GRANT ALL PRIVILEGES ON *.* TO admin@localhost IDENTIFIED BY \'password\' WIT ...

随机推荐

Apache服务停止：信号灯超时时间已到，指定的网络名不再可用
环境说明:Apache2.4.10,Windows Server 2008 R2 问题说明: apache服务用于下载文件,但是在运行一段时间后,突然挂了. 其错误提示如下所示: [error] (7 ...
轻松自动化---selenium-webdriver(python) (十)
本节重点处理下拉框 switch_to_alert() accept() 下拉框是我们最常见的一种页面元素,对于一般的元素,我们只需要一次就定位,但下拉框里的内容需要进行两次定位,先定位到下拉框,再 ...
Matlab数字信号处理
产生方波 clear t=0:0.01:10; subplot(4,1,1) f1=square(t); % 产生周期为2pi的方波信号 plot(t,f ...
在SSMS里批量删除表、存储过程等各种对象
在SSMS里批量删除表.存储过程等各种对象以前想找批量删除表或者存储过程的方法,原来SSMS的GUI界面也可以完成请看下图,因为这次出差的时候要删除所有的存储过程,然后重建这些存储过程而表.函数 ...
蓝牙BLE 架构剖析
一.BLE架构概述: 二.各个层
java第四周学习
这一周学习的还是面向对象的方法和应用 Java中方法的使用和注意事项如果没有返回值,就不允许通过return关键字返回结果方法中不允许嵌套使用 Return返回值只允许返回一个值,不允许返回多个 ...
Beautiful Soup 定位指南
Reference: http://blog.csdn.net/abclixu123/article/details/38502993 网页中有用的信息通常存在于网页中的文本或各种不同标签的属性值,为 ...
Django&lowbar;&lowbar;WSGI
WEB应用的本质 : 1. 浏览器发送一个http请求 2. 服务器收到请求,生成一个html文档 3. 服务器把HTML文档作为HTTP响应的body发送给浏览器 4. 浏览器收到http响应,从h ...
java遍历的优化
说明:这是在面试中面试官出的题.虽然是常见的优化问题,但这种经验的确很有用.感慨之余,分享出来,以此共勉. 场景:现有List<PersonA>,List<PersonB>,P ...
HotSpot设计原理与实现：一、初识HotSpot
一.HotSpot内核模块组成和功能框架 1.HotSpot内核模块图 (1)Prims模块: (2)Service模块: (3)Runtime模块: 二.虚拟机生命周期(JVM初始化过程) 1.虚拟 ...