css--图片整合（精灵图）

图片整合（精灵图）

精灵图的优点：

减少图片的字节
减少了网页的http请求，从而大大的提高了页面的性能
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

通用代码如下：

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片整合</title>

<style>
.box{
    width:200px;
    margin:0 auto;
    overflow:hidden;
    background:url(img_navsprites_hover.gif    )0 0;
    background:no-repeat;
    
}


.into{
    float:left;
    width:43px;
    margin-left:10px;
    height:    44px;
    
}

.span1{
    background:url(img_navsprites_hover.gif    )0 0;
}


.span1:hover{background: url('img_navsprites_hover.gif') 0 -45px;}


.span2{background:url('img_navsprites_hover.gif') -47px 0;}


.span2:hover{background: url('img_navsprites_hover.gif') -47px -45px;}



.span3{background:url('img_navsprites_hover.gif') -91px 0}


.span3:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

</style>
</head>
<body>
    <div class="box">
        <span class="into span1"></span>
        <span class="into span2"></span>
        <span class="into span3"></span>
    </div>



    
    
    </div>


</body>

</html>

运行结果：

图片描述

总结：

精灵图可以通过浮动加背景图片来实现
精灵图也可以通过ul也可以实现主要是后期的定位移动。

css--图片整合（精灵图）

图片整合（精灵图）

精灵图的优点：

通用代码如下：

运行结果：

总结：

zeyu

引用和评论

js面向对象编程的理解

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具