标签：页面 代码 使用 oct icon css_ set 图片 title
作用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 /* 默认第一个切图 */ 9 div{ 10 width: 41px; 11 height: 69px; 12 /* background-color: #bfa; */ 13 background-image: url(雪碧图按钮/icon-slides.png); 14 background-position: 0 0; 15 float: left; 16 margin-left: 50px; 17 } 18 /* 第二个切图 */ 19 .b{ 20 background-position: -41px 0; 21 } 22 23 /* 第三个切图 */ 24 .c{ 25 background-position: -83px 0; 26 } 27 /* 第四个切图*/ 28 .d{ 29 background-position: -124px 0; 30 } 31 32 </style> 33 </head> 34 <body> 35 <div class="a"></div> 36 <div class="b"></div> 37 <div class="c"></div> 38 <div class="d"></div> 39 40 </body> 41 </html>
效果
在线的雪碧图CSS代码生成
http://tools.jb51.net/code/css_sprite
http://alloyteam.github.io/gopng/
标签：页面 代码 使用 oct icon css_ set 图片 title
原文地址：https://www.cnblogs.com/fsg6/p/12676510.html
