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
html li标签前面添加图标三种方法的更多相关文章
- 三种方法为QLineEdit添加清除内容按钮
很多时候我们会发现输入的一长串内容不得不全部删除重新输入,这时比起一直按着退格键不放一个清除内容按钮更受欢迎. 今天我将介绍三种为QLineEdit添加清除内容按钮的方法,其中两种方法有较强的功能针对 ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤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 ...
随机推荐
- Fatal signal 11 (SIGSEGV) at 0xdeadbaad (code=1) 错误 解决方案(android-ndk)
在android里做ndk编程的时候,碰到个随机性错误 错误信息如下: 05-06 15:59:44.411: A/libc(3347): Fatal signal 11 (SIGSEGV) at 0 ...
- Java 泛型数组
Java 不支持泛型数组.也就是说, List<String>[] ls = new ArrayList<String>[10]; 是不支持的,而 List<String ...
- JAVA学习篇--javaweb之Filter具体解释
在DRP项目中,多次提到了Filter,它攻克了字符集的统一设置以及统一控制简单WebCache,从中我们能够体会到.它给我们带来的优点不不过降低代码量这么简单,它的出现避免了我们每一个页面反复的编写 ...
- 关于MyEclipse查看底层源码出现source not found的问题(MyEclipse、Eclipse配置JAD)
一.MyEclipse 第一步: 下载jad.exe文件:jad下载地址 eclipse插件:net.sf.jadclipse_版本号.jar下载地址一 net.sf.jadclipse_版 ...
- MVC 5.0 之奇葩错误-<类型“ASP._Page__ViewStart_cshtml”不从“System.Web.WebPages.StartPage”继承>
在实际项目中,我们通常添加MVC项目会先添加一个MVC Empty 的项目,然后需要什么在往里面添加. 但是Empty项目里面只有一个路由注册,而且没有_ViewStart.cshtml文件需要自己添 ...
- c - 每位数字尾部加空格
/* input:一个4位整数. output:每位整数后紧跟一个空格的字符串. */ char * insert(char *s) { int len = strlen(s); * len + ); ...
- displaytag 动态列实现
这种动态列的实现方法来自displaytag-examples-1.2.war提供的示例中,实际上下载下来的zip文件中不仅有各种jar包,还有这个包含各种例子的war包,是学习displaytag的 ...
- Linux下的静态IP配置【weber出品】
配置Linux下的静态IP地址 因为服务器的IP地址是固定的,不像我们自己家的笔记本的IP是动态的.所以我们要将这个地址给写成静态的. 直接编辑这个这个配置文件即可: vi /etc/sysconfi ...
- javascrip中setTimeout和setInterval
1: http://www.jb51.net/article/68258.htm 2: http://www.jb51.net/article/26679.htm
- java开发软件的安装
jdk+eclipse+svn+maven+mysql+tomcat7.0+sublime安装包和jar插件 配置管理工具-SVN http://download.csdn.net/detail/u0 ...