css利用定位製做雪碧圖

時間 2019-11-11

標籤 css 利用定位製做雪碧欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .div1{            border: 5px solid black;        }        .div2{            width: 91px;            height: 139px;            background-image: url("../images/1.png");        }        .div3{              width: 91px;              height: 139px;              background-image: url("../images/1.png");              -webkit-transform: translate(15px,-120px);          }        .div4{            width: 91px;            height: 139px;            background-image: url("../images/2.png");            -webkit-transform: translate(30px,-240px);        }        .div5{            width: 91px;            height: 139px;            background-image: url("../images/3.png");            -webkit-transform: translate(45px,-360px);        }        .div6 {            width: 91px;            height: 139px;            background-image: url("../images/4.png");            -webkit-transform: translate(60px,-480px);        }        .div7{            width: 91px;            height: 139px;            background-image: url("../images/5.png");            -webkit-transform: translate(75px,-600px);        }        .div7{            width: 91px;            height: 139px;            background-image: url("../images/6.png");            -webkit-transform: translate(80px,-600px);        }        .div8{            width: 91px;            height: 139px;            background-image: url("../images/7.png");            -webkit-transform: translate(120px,-739px);        }        .div9{            width: 91px;            height: 139px;            background-image: url("../images/8.png");            -webkit-transform: translate(165px,-878px);        }        .div10{              width: 91px;              height: 139px;              background-image: url("../images/10.png");              -webkit-transform: translate(200px,-1035px);          }        .div11{            width: 91px;            height: 139px;            background-image: url("../images/11.png");            -webkit-transform: translate(220px,-1200px);        }        .div12{            width: 91px;            height: 139px;            background-image: url("../images/13.png");            -webkit-transform: translate(240px,-1360px);        }        .div13{            width: 91px;            height: 139px;            background-image: url("../images/14.png");            -webkit-transform: translate(260px,-1530px);        }    </style></head><body><div class="div1">    <div class="div2"></div>    <div class="div3"></div>    <div class="div4"></div>    <div class="div5"></div>    <div class="div6"></div>    <div class="div7"></div>    <div class="div8"></div>    <div class="div9"></div>    <div class="div10"></div>    <div class="div11"></div>    <div class="div12"></div>    <div class="div13"></div></div></body></html>

1. CSS Sprite 雪碧圖製做
2. 利用compass製做雪碧圖
3. css雪碧圖
4. CSS雪碧圖
5. css 雪碧圖
6. 雪碧圖的製做
7. compass製做sprite雪碧圖
8. photoshop 雪碧圖製做
9. 【Gulp】gulp製做雪碧圖
10. gulp 製做雪碧圖
更多相關文章...
• 使用 CSS 顯示 XML - XML 教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 漫談MySQL的鎖機制
• RxJava操作符（十）自定義操作符

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。