写精灵图心得

最新推荐文章于 2024-09-06 23:41:09 发布

buhuitiqiudexiaogou

最新推荐文章于 2024-09-06 23:41:09 发布

阅读量126

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/Messi666789/article/details/140524916

版权

刚学完盒子和背景的应用就去写了一下网易云的精灵图

就是做出大概这种效果

然后先去网易云官网扒一下它的图片

我们看到右下角就是地址了，复制下来就完事了。

拿到地址后我第一个想的就是怎么去布局，我想了很久，我认为我一开始是没有去理解盒子的意思，只要理解就非常好做了。

其实网易云的精灵图分为两个部分，一个是背景图，一个是文字，且它们是上下结构，那么我们就可以想成用两个盒子构成，最外面的盒子就是用来存放所有背景图的，而里面的盒子就是每个背景图和文字构成的盒子

然后第一步就是给盒子设置css

.box就是给最外层盒子设置的属性，因为我们需要让盒子居中，而块盒子居中方式很简单就只需要将margin设置auto就可以了因为当时没有想到水平设置的方法就上网查了一下发现display:flex可以直接设置盒子水平写内容的属性（最下面我会给大家看一下我想到用table的方法解决这个问题），然后.glass就是设置的背景图了，注意这里我们要设置不平铺，然后height和width先设置出能让整个图片显示出来其实写完盒子的整体框架之后后面的操作都很简单了，就只需要打开页面控制台（快捷键：F12）调背景图的位置就可以了，这里注意我们需要调鼠标触碰显示和鼠标不触碰显示的两种效果，只需要分别把它们的位置设置到大致重合上就行，这里有个方法就是我们要对着盒子左上角顶格去调整背景图的位置

下面就是完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            margin: auto;
            width: 50%;
            /* 设置主轴水平放置 */
            display: flex
        }

        .box .item {
            width: 105px;
           
        }

        .glass {
            /* background-position: -337px 9px; */
            /* 设置不平铺 */
            background-repeat: no-repeat;
            height: 110px;
            width: 100px;
            margin-right: auto;
            margin-left: auto;
            /* border: solid red; */
            background-image:url(https://s2.music.126.net/style/web2/img/foot_enter_new2.png?52ee046b5725a64038d6d7c6264f14d7);
        }
        
        .yy {
            background-position: -337px 9px;
        }
        .yy:hover {
            background-position: -6px -211px;
        }

        .yc {
            background-position: -4px -320px;
        }

        .yc:hover {
            background-position: -112px -322px;
        }

        .ai {
            background-position: 0px -105px;
        }
        .ai:hover {
            background-position: -110px 5px;
        }


    </style>
</head>
<body>

    <div class="box">
        <div class="item">
            <div class="glass yy"></div>
            <p>音乐开放模式</p>
        </div>
        <div class="item">
            <div class="glass yc"></div>
            <p>云村交易平台</p>
        </div>
        <div class="item">
            <div class="glass ai"></div>
            <p>AI免费写歌</p>
        </div>
    </div>
    
</body>
</html>

下面是用table完成的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 1200px;
            /* 块盒子居中 */
            margin-left: auto;
            margin-right: auto;
            /* background-color: aliceblue; */
            /* padding: 20px 40px; */
        }

        .item {
            width: 130px;
            /* margin-bottom: 20px; */
        }

        .item p {
            text-align: center;
            font-size: 18px;
            color: #666;
            margin: 10px;
        }

        .item .item-bg-img {
            width: 100px;
            height: 100px;
            background-image: url(https://s2.music.126.net/style/web2/img/foot_enter_new2.png?52ee046b5725a64038d6d7c6264f14d7);
            background-repeat: no-repeat;
            /* background-position: -100px 0; */
            margin: 10px auto;
            margin-bottom: 0;
            /* border: solid 1px red; */
        }

        .yy {
            background-position: -225px -225px;
        }

        .yy:hover {
            background-position: -5px -5px;
        }

        .yc {
            background-position: -9px -333px;
        }
        .yc:hover {
            background-position: -115px -331px;
        }

        .yh {
            background-position: -117px -116px;
        }
        .yh:hover {
            background-position: -224px -4px;
        }

        .cz {
            background-position: -330px -115px;
        }
        .cz:hover {
            background-position: -220px -115px;
        }

        .zs {
            background-position: -335px -223px;
        }
        .zs:hover {
            background-position: -114px -224px;
        }
        td .item {
            margin: auto;
        }
    </style>
</head>

<body>

    <!-- https://s2.music.126.net/style/web2/img/foot_enter_new2.png?52ee046b5725a64038d6d7c6264f14d7 -->

    <table id="app">
        <tr>
            <td>
                <div class="item">
                    <a href="https://developer.music.163.com/st/developer">
                        <div class="item-bg-img yy"></div>
                    </a>
                    <p>音乐开放平台</p>
                </div>
            </td>
            <td>
                <div class="item">
                    <a href="https://music.163.com/st/web-sublicense/home">
                        <div class="item-bg-img yc"></div>
                    </a>
                    <p>云村交易所</p>
                </div>
            </td>
            <td>
                <div class="item">
                    <a href="https://music.163.com/st/userbasic#/auth">
                        <div class="item-bg-img yh"></div>
                    </a>
                    <p>用户认证</p>
                </div>
            </td>
            <td>
                <div class="item">
                        <a href="https://blog.csdn.net/Messi666789?spm=1000.2115.3001.5343">
                            <div class="item-bg-img cz"></div>
                        </a>
                    <p>充值</p>
                </div>
            </td>
            <td>
                <div class="item">
                    <a href="https://music.163.com/web/reward">
                        <div class="item-bg-img zs"></div>
                    </a>
                    <p>赞赏</p>
                </div>
            </td>
           
        </tr>
    </table>


</body>

</html>

效果图如下：

buhuitiqiudexiaogou

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
写精灵图心得

其实网易云的精灵图分为两个部分，一个是背景图，一个是文字，且它们是上下结构，那么我们就可以想成用两个盒子构成，最外面的盒子就是用来存放所有背景图的，而里面的盒子就是每个背景图和文字构成的盒子。拿到地址后我第一个想的就是怎么去布局，我想了很久，我认为我一开始是没有去理解盒子的意思，只要理解就非常好做了。刚学完盒子和背景的应用就去写了一下网易云的精灵图。我们看到右下角就是地址了，复制下来就完事了。然后先去网易云官网扒一下它的图片。然后第一步就是给盒子设置css。下面是用table完成的代码。
复制链接

扫一扫