zoukankan      html  css  js  c++  java
  • CSS雪碧图-html优化

    雪碧图的原理:用同一张图片的不同位置,实现减少http请求的减少

    <!DOCYTYPE html>
    <html lang="en">
    <html>
    	<HEAD>
    		<meta charset="utf-8">
    		<title>test</title>
    		<style type="text/css">
    			.list{
    				list-style: none;
    				 300px;
    				height: 305px;
    				margin: 50px auto 0;
    				padding: 0;
    			}
    			.list li{
    				height: 60px;
    				border-bottom:1px dotted #000;
    				line-height: 60px;
    				text-indent: 50px;
    				background:url(images/bg01.png) 0px 10px no-repeat;
    			}
    			.list .icon2{
    				background-position: left -71px;
    			}
    			.list .icon3{
    				background-position: left -154px;
    			}
    			.list .icon4{
    				background-position: left -235px;
    			}
    			.list .icon5{
    				background-position: left -315px;
    			}
    		</style>
    	</HEAD>
    	<BODY>
    		<ul class="list">
    			<li>1111</li>
    			<li class="icon2">2222</li>
    			<li class="icon3">3333</li>
    			<li class="icon4">4444</li>
    			<li class="icon5">5555</li>
    		</ul>
    	</BODY>
    </html>
    

    其中序号是一张图达到效果

  • 相关阅读:
    常用CDN
    SQL语句小结
    jQuery源码解析----domManip
    服务治理 SpringCloud Eureka
    docker容器操作
    docker镜像操作常用命令
    Maven
    Centos6解决网络不可达
    MyBatis
    SpringMVC
  • 原文地址:https://www.cnblogs.com/lzq70112/p/13154308.html
Copyright © 2011-2022 走看看