现在做代码上的优化H1很重要,原来也看了不少H1用在首页logo上的方法,今天偶然发现淘宝也有在用,方法跟原来看到的都不一样,下面来分享一下淘宝网的做法。
html:
[sourcecode language="html"]<h1 id="logo" style="position: relative;"><a style="height: 63px;" href="http://www.taobao.com/" target="_top">淘宝网<img title="Taobao.com - 阿里巴巴旗下网站" src="http://img02.taobaocdn.com/tps/i2/T1QXVsXnFjXXXXXXXX-167-63.png" alt="淘宝网" width="167" height="63" /></a>
<a style="position: absolute; left: 0pt; top: 60px; width: 167px; height: 20px; background: url(http://img02.taobaocdn.com/tps/i2/T1QXVsXnFjXXXXXXXX-167-63.png) no-repeat scroll
999em 0pt transparent;" title="2010消费者年" href="/go/act/sale/gouwu.php"></a></h1>[/sourcecode]
CSS:
[sourcecode language="css"]}
#logo {
float:left;
margin-right:-3px;
margin-top:6px;
padding:16px 0 4px;
width:250px;
}
#logo a {
display:block;
height:43px;
margin:0 32px 0 1px;
overflow:hidden;
position:relative;
width:167px;
}
#logo img {
left:0;
position:absolute;
top:0;
}[/sourcecode]
通过这样设置,图片就会把文字遮住,而不像过去看到的那种缩进到屏幕外面,或者隐藏起来,学习了。
小偷吧,笑而不语
拿来学习而已…
学习一下。。。。。。。。。
这个是跟google前端学的,有好几种呢,以前整理过。