范仁义css3课程---36、背景6（ 背景小实例：淘宝 ）
范仁义css3课程---36、背景6（ 背景小实例：淘宝 ）
一、总结
一句话总结：
淘宝的背景小实例中，主要使用的是background-position取负值从而取到背景图片上面的不同小图标。
二、课程代码
博客对应课程的视频位置：36、背景6（ 背景小实例：淘宝 ）
https://www.fanrenyi.com/video/10/78
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>背景6（ 背景小实例：淘宝 ）</title> 6 <style> 7 .icon_box{ 8 float: left; 9 /*display: inline-block;*/ 10 border: 1px solid red; 11 padding: 20px; 12 width: 24px; 13 height: 24px; 14 } 15 .icon{ 16 width: 24px; 17 height: 24px; 18 display: inline-block; 19 } 20 .bg{ 21 background-image: url("../imgs/taobao.png"); 22 } 23 </style> 24 </head> 25 <body> 26 <div> 27 <a href="" class="icon_box"> 28 <span class="icon bg" style="background-position:0 0;"></span> 29 </a> 30 <a href="" class="icon_box"> 31 <span class="icon bg" style="background-position:0 -44px;"></span> 32 </a> 33 <a href="" class="icon_box"> 34 <span class="icon bg" style="background-position:0 -88px;"></span> 35 </a> 36 </div> 37 </body> 38 </html>
