左侧图片 右侧块的实现方法---解决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-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;

}

时间: 2024-12-30 03:27:33

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

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

分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="index-new w1200 mt30"> <div class="indexadd mt50 mb60"> <div id="banners" class="ui-banner"> <

解决PHP后端生成的图片无法使用CDN缓存的方法

解决PHP后端生成的图片无法使用CDN缓存的方法 今天发现线上有个问题,线上一个图片域名,在前端已经加了CDN缓存,不落缓存,则用PHP动态实现图片缩放,但经PHP处理过的图片输出后,每次都要从后端读取,后端服务器压力瞬间增加,经分析,PHP中没有作304的处理, HTTP的原理是这样的,每次请求到服务器后,服务端检测有没有修改,如没有修改,可以直接返回一个304的状态码,这样就用客户端的缓存了,CDN的原理就是如此,如果设置了304,就会将相应的URL进行缓存起来: 参考来源:  http:/

css之两栏布局左侧固定右侧高度自适应

css两栏布局之左侧固定右侧高度自适应 先看这样的html+css结构: .main { width: 900px; overflow:hidden; margin: 0 auto; border:1px solid #000; } .left { width: 600px; float:left; background: #ccb; } .right { float:left; width: 300px; background: #acf; } <div class="main"

Maven构造版本号的方法解决浏览器缓存问题

需要解决的问题 在做WEB系统开发时,为了提高性能会利用浏览器的缓存功能,其实即使不显式的申明缓存,现代的浏览器都会对静态文件(js.css.图片之类)缓存.但也正因为这个问题导致一个问题,就是资源的缓存逻辑有时出现问题后服务器的最新版本文件无法更新客户端的缓存. 这个问题会给用户产生许多的困扰,当然首先是测试人员会很头痛,一些看起来没有修复的bug为什么开发要说做好了?这种时候我会无奈的说:ctrl+f5刷新一下.但这毕竟不是解决问题的方法. 思路与方法考虑 思路 之前没有着手处理过这样的问题

VS2013+openCV3.0无脑配置方法+解决警告问题【windows平台】

VS2013+openCV3.0无脑配置方法+解决警告问题[windows平台] 本文介绍如何配置VS+openCV环境,并解决“opencv 3.0 warning C4819: 该文件包含不能在当前代码页(936)中表示的字符.请将该文件保存为 Unicode 格式以防止数据丢失的”警告 参考博客: http://my.phirobot.com/blog/2014-02-opencv_configuration_in_vs.html 下载 openCV 下载 Opencv for Windo

7种方法解决移动端Retina屏幕1px边框问题

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe

微信图片反防盗链的方法

微信图片反防盗链的方法(此图片来自微信公众平台,未经允许不可饮用) (未找到出处,如有侵犯,请及时告知,谢谢) 因为在<img>标签中引用微信的图片 <?php $img = "http://mmbiz.qpic.cn/mmbiz /ibbmVK4uC7iacR4KGWnyJHvQxl276DK6eGibiafBFTLObjBtKU9hGZoiaaiaD49r4u9otkQzCGAPAbWlPVzrpyCRaCVA/0"; ?> <img src=&quo

使用CSS、JavaScript及Ajax实现图片预加载的方法详解 

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享使用CSS.JavaScript及Ajax实现图片预加载的三个不同技术,来增强网站的性能与可用性.一起来看看吧,希望对大家学习web前端有所帮助. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS

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

需要解决的问题 在做WEB系统开发时,为了提高性能会利用浏览器的缓存功能,其实即使不显式的申明缓存,现代的浏览器都会对静态文件(js.css.图片之类)缓存.但也正因为这个问题导致一个问题,就是资源的缓存逻辑有时出现问题后服务器的最新版本文件无法更新客户端的缓存. 这个问题会给用户产生许多的困扰,当然首先是测试人员会很头痛,一些看起来没有修复的bug为什么开发要说做好了?这种时候我会无奈的说:ctrl+f5刷新一下.但这毕竟不是解决问题的方法. 思路与方法考虑 思路 之前没有着手处理过这样的问题