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 ...
随机推荐
- MyEclipse 8.0注冊码+原版下载_Java开发软件
MyEclipse是一个十分优秀的用于开发Java, J2EE的Eclipse插件集合,MyEclipse的功能很强大,支持也十分广泛,尤其是对各种开元产品的支持十分不错.MyEclipse眼下支持J ...
- bootstrap前端开发框架,未来发展趋势
http://v3.bootcss.com/getting-started/Bootstrap 起步 CSS 组件 JavaScript插件 定制 关于 CSS 设置全局CSS样式,基本的HTML元素 ...
- Hibernate Validation各注解的用法
Bean Validation 中内置的 constraint @Null 被注释的元素必须为 null @NotNull 被注释的元素必须不为 null @AssertTrue 被注释的元素必须为 ...
- 【转】asp.net 利用Global.asax 捕获整个解决方案中的异常错误
之前做项目的时候都是在每个页面中处理这不同的异常信息,一个页面数下来,很多个try{}catch{}语句块,令整个代码结构有些不够美观. 今天看到一篇帖子,是关于利用全局应用程序类来帮忙获取异常信息, ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- ORA-04021
编译或删除存储过程的时候,系统会卡住,一段时间后出现ora-04021错误. 1.可能被锁住查看v$locked select b.sid,b.serial#,b.machine,b.terminal ...
- UI基础视图----UIView总结
UIView是UIKit框架里面最基础的视图类,是UIResponder的子类,是UIApplication和UIViewController的兄弟类,是UIWindow,UILabel,UIImag ...
- .net framework 注册到IIS上
首先要安装好所需的IIS版本和.net framework 各版本,注册方式如下: 1.1:C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322\aspnet_re ...
- C#System.Net.Mail采用简单邮件传输协议发送邮件
引用: using System.Net.Mail; public class EmailHelper { public static bool SendEmail(string title, str ...
- Python中urlopen()介绍
#以下介绍是基于Python3.4.3 一. 简介 urllib.request.urlopen()函数用于实现对目标url的访问. 函数原型如下:urllib.request.urlopen( ...