zoukankan      html  css  js  c++  java
  • 范仁义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>
     
  • 相关阅读:
    第一阶段SCRUM冲刺day07
    第一阶段SCRUM冲刺day06
    第一阶段SCRUM冲刺day05
    第一阶段SCRUM冲刺day04
    2020年第七周学习进度
    第一阶段SCRUM冲刺day03
    第一阶段SCRUM冲刺day02
    团队会议01
    2020年第六周学习进度
    TCP/IP Socket 的理解
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12293709.html
Copyright © 2011-2022 走看看