案例：1.利用循环实现精灵图布局 2.显示隐藏文本框内容

最新推荐文章于 2021-10-29 09:00:00 发布

杨蛋蛋~R

最新推荐文章于 2021-10-29 09:00:00 发布

阅读量348

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50119334/article/details/108900728

版权

案例一利用循环实现精灵图布局

分析：首先精灵图图片排列是由规律的
核心思路：

利用for循环，修改精灵图的背景位置 background-position
然后用软件测量，得到规律：让for循环里面的i的索引号*44就是每个图片的y坐标

<style>
      * {
   
        padding: 0px;
        margin: 0px;
      }
      li {
   
        list-style-type: none;
      }
      .box {
   
        width: 250px;
        margin: 100px auto;
      }
      .box li {
   
        float: left;
        width: 24px;
        height: 24px;
        background-color: pink;
        margin: 15px;
        background: url(images/taobao.png) no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li></li>

最低0.47元/天解锁文章

杨蛋蛋~R

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
案例：1.利用循环实现精灵图布局 2.显示隐藏文本框内容

分析：首先精灵图图片排列是由规律的核心思路：利用for循环，修改精灵图的背景位置 background-position然后用软件测量，得到规律：让for循环里面的i的索引号*44就是每个图片的y坐标<style> * { padding: 0px; margin: 0px; } li { list-style-type: none; } .box { ..
复制链接

扫一扫