zoukankan      html  css  js  c++  java
  • 左侧图片 右侧块的实现方法---解决3像素bug的一种解决方案,不用浮动用绝对定位和margin-left

    google的实现方式是:

    <div class="mw">

      <a href="/" id="mlogo">  </a>

      <div id="tsfi" style="zoom:1"></div>

    </div>

    图片可以作为a标签的背景或者嵌套子a标签里面,为a标签设置绝对定位,右面搜索框为正常块,为右面的搜索框设置margin-left即可

    具体如下,也可直接去看google搜索页

    .mw{

      max-100%;

    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi)
     
    #mlogo {

      background-imageurl(/images/logo_mobile_srp_highres_3.png);

    }
    #mlogo {
      backgroundurl(/images/logo_mobile_srp_3.png) no-repeat;
      background-size75px 26px;
      colortransparent;
      width75px;
      height26px;
      left9px;
      positionabsolute;
      text-aligncenter;
      top8px;
    }
    #tsfi {
      margin-left102px;
      -webkit-transitionall .15s;
    }
  • 相关阅读:
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Oil Skimming HDU
    Rain on your Parade HDU
    Swap HDU
    棋盘游戏 HDU
  • 原文地址:https://www.cnblogs.com/mabelstyle/p/3750341.html
Copyright © 2011-2022 走看看