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-width:100%;

}

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

#mlogo {

  background-image: url(/images/logo_mobile_srp_highres_3.png);

}
#mlogo {
  background: url(/images/logo_mobile_srp_3.png) no-repeat;
  background-size: 75px 26px;
  color: transparent;
  width: 75px;
  height: 26px;
  left: 9px;
  position: absolute;
  text-align: center;
  top: 8px;
}
#tsfi {
  margin-left: 102px;
  -webkit-transition: all .15s;
}

左侧图片 右侧块的实现方法---解决3像素bug的一种解决方案,不用浮动用绝对定位和margin-left的更多相关文章

  1. jQuery左侧图片右侧文字滑动切换代码

    分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...

  2. bootstrap实现左侧图片右侧文字布局

    效果图 代码 通过class="media-left"来控制相对位置 <!DOCTYPE html> <html> <head lang=" ...

  3. bugfree如何修改Bug7种解决方案的标注方法

    Bug有7种解决方案的标注方法 By Design- 就是这么设计的,无效的Bug Duplicate - 这个问题别人已经发现了,重复的Bug External - 是个外部因素(比如浏览器.操作系 ...

  4. 解决TextView drawableRight左侧图片大小不可控的问题

    通过代码来修改图片的大小: Drawable rightDrawable= context.getResources().getDrawable(R.drawable.more); rightDraw ...

  5. 解决IDEA右侧maven不显示方法

    解决IDEA右侧maven不显示方法 Ctrl+shift+A --> maven--> add maven projects -->选择对应的pom.xml

  6. after及before伪元素及解决父元素塌陷的几种方法

    一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...

  7. 学习笔记:Maven构造版本号的方法解决浏览器缓存问题

    需要解决的问题 在做WEB系统开发时,为了提高性能会利用浏览器的缓存功能,其实即使不显式的申明缓存,现代的浏览器都会对静态文件(js.css.图片之类)缓存.但也正因为这个问题导致一个问题,就是资源的 ...

  8. android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法

    android通过BitmapFactory.decodeFile获取图片bitmap报内存溢出的解决办法 原方法: public static Bitmap getSmallBitmap(Strin ...

  9. 【转】简单内存泄漏检测方法 解决 Detected memory leaks! 问题

    我的环境是: XP SP2 . VS2003 最近在一个项目中,程序退出后都出现内存泄漏: Detected memory leaks! Dumping objects -> {98500} n ...

随机推荐

  1. ios 缩放图片(平铺)

    //缩放图片(平铺) - (UIImage *)resizeImage:(NSString *)imgName { UIImage *bgImage =  [UIImage imageNamed:im ...

  2. java调用本地默认浏览器

    1 http://blog.csdn.net/casularm/article/details/3401018 2

  3. Andrew Ng机器学习笔记+Weka相关算法实现(五)SVM最优间隔和核方法

    这一章主要解说Ng的机器学习中SVM的兴许内容.主要包括最优间隔分类器求解.核方法. 最优间隔分类器的求解 利用以一篇讲过的的原始对偶问题求解的思路,我们能够将相似思路运用到SVM的求解上来. 详细的 ...

  4. 使用OSChina代码托管管理项目(四)

    本篇主要介绍使用Eclipse的Egit插件克隆远程project到本地的操作步骤 一.在Git资源库管理视图中新建一个远程资源库位置 点击红框中button进行加入 二.输入远程资源库相关信息.选择 ...

  5. Android sdk 更新失败解决方发整理

    解决办法: 设置本地hosts windows里hosts位置在C:\Windows\System32\drivers\etc,找到hosts文件 直接在hosts文件的最后加一行: 74.125.2 ...

  6. iOS 常用图尺寸 汇总

    iCON 准备一张1024x1024尺寸的图,打开链接 http://www.atool.org/ios_logo.php 在线批量生成各种尺寸的图片 启动图LaunchImage 640x960 2 ...

  7. C#趣味程序---理財高手

    问题:如果银行存款分五种 利率:0.63%  一年   月 利率:0.66%  二年   月 利率:0.69%  三年   月 利率:0.75%  五年   月 利率:0.84%  八年   月 如今 ...

  8. saltstack之nginx部署

    1./srv/salt/nginx目录树 . conf.sls file |--- nginx |--- nginx-1.5.1.tar.gz |--- nginx.conf |--- nginx_l ...

  9. 转载:Python 包管理工具解惑

    Python 包管理工具解惑 本站文章除注明转载外,均为本站原创或者翻译. 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商: 本站部分原创和翻译文章提供m ...

  10. C语言基础知识【变量】

    C 变量1.变量其实只不过是程序可操作的存储区的名称.C 中每个变量都有特定的类型,类型决定了变量存储的大小和布局,该范围内的值都可以存储在内存中,运算符可应用于变量上.变量的名称可以由字母.数字和下 ...