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>
     
  • 相关阅读:
    RestKit ,一个用于更好支持RESTful风格服务器接口的iOS库
    Pop–实现任意iOS对象的任意属性的动态变化
    界面传值失败
    UIImagePickerController
    NSURLSession
    iOS图标尺寸
    cocoapods
    duplicate symbol _OBJC_IVAR
    MAC升级openssl
    Mac
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12293709.html
Copyright © 2011-2022 走看看