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