CSS Sprite 雪碧图制做

时间 2019-11-08

标签 css sprite 雪碧图制栏目 CSS 繁體版

原文原文链接

CSS Sprite 雪碧图，简单来讲就是：css

为了提升网页的性能，减小加载次数，将一些不会常常随网站内容变化的小图标，集中放在一张大图上，将该图应做为background-image 嵌入页面中，在须要相关图标时，根据background-position设置坐标值，达到目的。html

一个例子，能够复制而后看一下效果：app

HTML代码：工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sprite</title>
    <link rel="stylesheet" href="css-sprite.css">
</head>
<body>
<div class="container">
    <ul class="menu">
        <li class="cat-1">
            <i></i>
            <h3><a href="#">项目一</a></h3>
        </li>
        <li class="cat-2">
            <i > </i>
            <h3><a href="#">项目二</a></h3>
        </li>
        <li class="cat-3">
            <i></i>
            <h3><a href="#">项目三</a></h3>
        </li>
        <li class="cat-4">
        <i></i>
        <h3><a href="#">项目四</a></h3>
    </li>
        <li class="cat-5">
        <i></i>
        <h3><a href="#">项目五</a></h3>
    </li>
        <li class="cat-6">
        <i></i>
        <h3><a href="#">项目六</a></h3>
    </li>
        <li class="cat-7">
        <i></i>
        <h3><a href="#">项目七</a></h3>
    </li>
        <li class="cat-8">
        <i></i>
        <h3><a href="#">项目八</a></h3>
    </li>
        <li class="cat-9">
        <i></i>
        <h3><a href="#">项目九</a></h3>
    </li>
        <li  class="cat-10" >
        <i></i>
        <h3><a  href="#">项目十</a></h3>
    </li>
    </ul>
</div>

</body>
</html>

CSS代码：性能

/*
通用设置
*/
.container, .menu {
    margin:0;
    padding:0;
    line-height: 0;
}

a:link, a:visited {
    text-decoration: none;
    color: inherit;
}
a:hover {
    color: orangered;
}
/*
格式设置
*/

.menu {
    width: 120px;
    list-style-type: none;
    border: 1px solid #ccc;
}

.menu li {
    display: block;
    height: 31px;
    line-height: 31px;
}
li h3 {
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #eee;
}

li i {
    background: url("img/sprite.png");
    display: inline-block;
    float: left;
    width: 24px;
    height: 24px;
    margin: 0 15px 5px;
}

.cat-1 i{
    background-position: 0 0;
}
.cat-2 i {
    background-position: 0 -26px;
}

.cat-3 i{
    background-position: 0 -52px;
}
.cat-4 i {
    background-position: 0 -78px;
}

.cat-5 i{
    background-position: 0 -104px;
}
.cat-6 i {
    background-position: 0 -130px;
}

.cat-7 i{
    background-position: 0 -156px;
}
.cat-8 i {
    background-position: 0 -182px;
}

.cat-9 i{
    background-position: 0 -208px;
}
.cat-10 i {
    background-position: 0 -236px;
}

这是利用一个雪碧图在线制做工具制做的图，工具连接：http://lazytools.sinaapp.com/。其余工具不清楚，可是该工具最后会生成图标对应的位置CSS信息，可直接使用，很方便。学习

如下是最终效果图：网站

总结：对于新手而言，学习一个新知识点，应该多练习，本身写代码，光看光听是不起做用的，看视频的时候以为都会，实际操做时会出各类问题，多练习也是不断进步的最佳途径。url

不知道你是否懂得如何制做和运用雪碧图，反正如今我是会了，呵呵。spa

1. compass制做sprite雪碧图
2. CSS Sprite雪碧图
3. css Sprite雪碧图
4. css sprite 雪碧图
5. CSS Sprite——CSS雪碧图
6. Sprite - 雪碧图
7. 关于css雪碧图sprite
8. CSS Sprite雪碧图应用
9. No.006 雪碧图CSS Sprite
10. compass与css sprite（雪碧图）
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 漫谈MySQL的锁机制
• Docker容器实战(六) - 容器的隔离与限制