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 ...
随机推荐
- Factorization Machines 学习笔记(三)回归和分类
近期学习了一种叫做 Factorization Machines(简称 FM)的算法,它可对随意的实值向量进行预測.其主要长处包含: 1) 可用于高度稀疏数据场景:2) 具有线性的计算复杂度.本文 ...
- Jquery-uploadify多文件上传插件使用介绍
Jquery-uploadify多文件上传插件使用起来非常的给力,在此记录一下使用方法. query-uploadify插件的属性设置 <script src="JS/jquery.m ...
- Redis配置不当可导致服务器被控制,已有多个网站受到影响 #通用程序安全预警#
文章出自:http://news.wooyun.org/6e6c384f2f613661377257644b346c6f75446f4c77413d3d 符合预警中“Redis服务配置不当”条件的服务 ...
- (一)一个工作任务引起的乱战——c#中结构体与byte[]间相互转换
一个工作任务涉及到c#与c++系统间的udp通信,处理了蛮长时间没有完成任务,但是期间接触到不少小知识点.本人是初接触c#,c++语言没有接触过.可能写的东西都很小儿科,暂且记录下来当工作日记把. 先 ...
- Sass函数--数字函数
数字函数简介 Sass 中的数字函数提要针对数字方面提供一系列的函数功能: percentage($value):将一个不带单位的数转换成百分比值: round($value):将数值四舍五入,转换成 ...
- Python时间戳和日期
import time localtime=time.strftime("%Y-%m-%d %H:%M:%S", time.localtime(time.time())) prin ...
- 使用OpenXml实现生成数据字典文档(beta)
最近项目在走验收流程,之前没有仔细看SOW文档,发现需要补好多份文档,其中就有数据字典,项目组不愿意花时间太多的时间弄这些文档,也不希望以后还要重复劳动力,最终决定做一个工具,方便自己生成数据字典文档 ...
- EF中的自动追踪与代理
自动追踪 EF框架会自动追踪实体的变化(通过比较实体的当前值与原始值). 默认情况下,以下方法会自动触发实体变化的追踪 DbSet.Find DbSet.Local DbSet.Remove DbSe ...
- canvas.toDataURL(type, args)
canvas.toDataURL(type, args)该方法能够将canvas转换为图像,图像是基于Base64编码的.如果不指定两个参数,无参数调用该方法,转换的图像格式为png格式 •type: ...
- ios内存详解
IOS以及Mac os都是基于Unix/linux改造出来的,而在内存管理方面也沿用了Unix/Linux的内存管理机制. 下面主要说的是IOS系统,有很多比较喜欢捣鼓的吧友肯定自己清理过机器的内存, ...