Home >  > 淘宝网logo上的h1用法,可以学习一下

淘宝网logo上的h1用法,可以学习一下

4

现在做代码上的优化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]

通过这样设置,图片就会把文字遮住,而不像过去看到的那种缩进到屏幕外面,或者隐藏起来,学习了。

相关推荐

关注科技,热血而沉着,极致而纯粹。努力做一个理想主义者。

Comment (4)
Trackback (0)
  1. 大齐 unknowunknow 沙发 2010/12/05 02:54

    小偷吧,笑而不语

  2. 女人心 Internet Explorer 9.0Windows 7 板凳 2012/03/06 01:49

    学习一下。。。。。。。。。

  3. 56音乐网 Internet Explorer 8.0Windows XP 地板 2015/04/28 03:23

    这个是跟google前端学的,有好几种呢,以前整理过。

  • 还没有Trackback

发表评论

*

*