微信扫一扫打赏支持

范仁义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>

 

 

 

 

 

 
posted @ 2020-02-13 06:54  范仁义  阅读(160)  评论(0)  编辑  收藏  举报