zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Discovery Scanning
    Openvas
    Common Vulnerability Scoring System CVSS
    NIagara Workbench ( 温度控制)
    Nikto and whatweb
    Jace Config
    Active information gathering-services enumeration
    Intsall The Nessus in you kali linux
    Source Code Review
    Niagara workbench (Basic )
  • 原文地址:https://www.cnblogs.com/guxingzhe/p/5014233.html
Copyright © 2011-2022 走看看