首页 > 代码库 > 雪碧图

雪碧图

2024-09-27 15:23:02   217人阅读

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       body{
           margin: 0;
       }
       ul{
           padding: 0;
       }
       /*定视口*/
       div{
            width: 22px;
            height: 20px;
            float: left;
        }
        /*添加背景图，定方位*/
       .box1{
            background: url("icon.png");

        }
        .box2{
            background: url("icon.png");
            background-position: 0px -20px;
        }
        .box3{
            background: url("icon.png");
            background-position: 0px -41px;
        }
        .box4{
            background: url("icon.png");
            background-position: 0px -63px;
        }
        .box5{
            background: url("icon.png");
            background-position: 0px -81px;
        }
       .box6{
           background: url("icon.png");
           background-position: 0px -102px;
       }
       /*当移入第几个的时候第几个改变位置*/
        li:hover .box1{
            background-position:-22px -0px ;
        }
        li:hover  .box2{
            background-position: -22px -20px;
        }
        li:hover .box3{
            background-position:-21px -41px ;
        }
        li:hover .box4{
            background-position:-21px -63px ;
        }
       li:hover .box5{
           background-position:-21px -81px ;
       }
       li:hover .box6{
           background-position:-21px -102px ;
       }
       /*让li里的所有东西浮动*/
        li{
            width: 200px;
            height: 40px;
            list-style:none ;
            text-: 10px;
            float: left;
        }
        li>a{
            color: black;
            text-decoration: none;
            text-align: left;
        }
        li:hover a{
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li>
    <div class="box1"></div>
    <a href="http://www.mamicode.com/#">首页</a>
    </li>
    <li>
        <div class="box2"></div>
        <a href="http://www.mamicode.com/#">购物</a>
    </li>
    <li>
        <div class="box3"></div>
        <a href="http://www.mamicode.com/#">城堡</a>
    </li>
    <li>
        <div class="box4"></div>
        <a href="http://www.mamicode.com/#">影视</a>
    </li>
    <li>
        <div class="box5"></div>
        <a href="http://www.mamicode.com/#">手机</a>
    </li>
    <li>
        <div class="box6"></div>
        <a href="http://www.mamicode.com/#">米奇</a>
    </li>
</ul>
</body>
</html>

 

雪碧图


联系
我们