前端 雪碧图 (亚马逊)

2019-10-17  本文已影响0人  BJ000

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>雪碧图</title>

<style type="text/css">

.btn{

display:block;         /*将内联转成块*/

        width:42px;       /*购物车的宽高*/

        height:30px;

background-image:url("image/yamaxun.png");       /*图片路径*/

        background-repeat:no-repeat;         /*只显示图片一次,不会平铺*/

        background-position: -10px -338px;             /*定位购物车左边距和上边距*/

      }

.btn:hover{/         *鼠标滑过的链接a:hover*/

        background-position: -58px -338px;      /*图片的偏移量*/

                                           /*-58是第二个购物车的左边距 和 上边距*/

      }

</style>

</head>

<body>

<a href="#" class="btn"></a>

</body>

</html>


正常的:

鼠标经过的:

上一篇 下一篇

猜你喜欢

热点阅读