CSS Sprite雪碧图的应用

最新推荐文章于 2022-04-25 14:14:46 发布

一如年少模样

最新推荐文章于 2022-04-25 14:14:46 发布

阅读量724

点赞数

分类专栏：前端开发文章标签： css 雪碧图

本文链接：https://blog.csdn.net/u012896330/article/details/54861305

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

雪碧图

1.静态图片不随用户信息变化而变化
2.小图片，图片容量比较小
3.加载量比较大

一些大图不建议使用雪碧图工具 CssGaga

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>雪碧图导航</title>
    <style>
        h3,ul{margin: 0;padding: 0;}
        ul{list-style: none;}
        li h3{font-size: 14px;font-weight: 400;}
        li{
            display: block;
            height: 31px;
            overflow: hidden;
            border-bottom: 1px solid #dedede;
            line-height: 31px;
          }
          li i{
            background: url(img/sidebar.png);
            margin: 5px 8px 0 10px;
            display: inline;
            width: 30px;
            height: 24px;
            float: left;
            }
          .cat{
             width: 150px;
             background: #f8f8f8;
             border: 1px solid #bbb;

          }
          .cat-1 i{background-position: 0 0;}
          .cat-2 i{background-position: 0 -24px;}
          .cat-3 i{background-position: 0 -48px;}
          .cat-4 i{background-position: 0 -72px;}
          .cat-5 i{background-position: 0 -96px;}
          .cat-6 i{background-position: 0 -120px;}
          .cat-7 i{background-position: 0 -144px;}
          .cat-8 i{background-position: 0 -168px;}
          .cat-9 i{background-position: -40px 0;}

    </style>
</head>
<body>
    <div class="cat">
        <ul>
            <li class="cat-1">
                <i></i>
                <h3>服装内衣</h3>
            </li>
            <li class="cat-2">
                <i></i>
                <h3>鞋包配饰</h3>
            </li>
            <li class="cat-3">
                <i></i>
                <h3>运动户外</h3>
            </li>
            <li class="cat-4">
                <i></i>
                <h3>珠宝手表</h3>
            </li>
            <li class="cat-5">
                <i></i>
                <h3>手机数码</h3>
            </li>
            <li class="cat-6">
                <i></i>
                <h3>办公电脑</h3>
            </li>
            <li class="cat-7">
                <i></i>
                <h3>护肤彩妆</h3>
            </li>
            <li class="cat-8">
                <i></i>
                <h3>母婴用品</h3>
            </li>
            <li class="cat-9">
                <i></i>
                <h3>其他分类</h3>
            </li>
        </ul>
    </div>
 </body>
</html>

效果图：