html li标签前面添加图标三种方法
2015-12-02 21:21
721 查看
今天无聊写下这个例子,希望对初学者有帮助,代码如下
本人写的deme下载地址:http://download.csdn.net/detail/u010095549/9320861
效果如图:
<!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使用心得
- SVG 嵌入 HTML 页面
- markdown转为html及pdf
- HtmlUnit中AJAX执行的问题
- html--a标签直接触发手机打电话功能
- 关于Html中文乱码的问题
- <!DOCTYPE html>很重要
- XML学习笔记(一):HTML文件转成XML文件
- html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
- HTML标签自定义属性
- HTML 5怎么就成了RIA“杀手”?
- .NET编码解码(HtmlEncode与HtmlEncode)
- MVC htmlAttributes and additionalViewData
- HTML框架
- HTML表格的基本结构
- HTML超链接
- html()和text()区别
- 使用TWebBrowser组件保存网页为html和mht文件 收藏
- HTML学习笔记
- 【1】HTML