盗版阿里妈妈之随想

   由于本人的博客申请了阿里妈妈的广告栏，所以有的时候经常上去看看，由于这些年来的职业习惯养成了我只要上一个网站都要习惯性的打看一个网页源程序看看，由于今天上午比较轻闲所以就打算盗版一下阿里妈妈的登录页面，不成想，阿里妈妈的登陆页面里面用到了一个我非常喜欢的CSS技巧，所以也就引出了这一篇真心盗版阿里妈妈了。
    首先让我们先打开阿里妈妈的登录页面看一下：


在上面重点的划框的地方就是我们今天要盗版的地方，也许有人说，靠这有什么的，加个图片太take easy了，呵呵，其实不是这样的，我们打开它的源码看看,为了简化我只截取了今天要看的一小段：
<body class="market">
    <div id="header">
        <div id="logo" class="bg-header">
            <a href="http://www.alimama.com"><span>阿里妈妈 Alimama.com</span></a>
        </div>
</div>
</body>
在这一小段html中用到了market header logo这几段css样式类，以下是它们的实现，由于样式比较多，我只截取了其中我们会用到的，其他CSS样式，请读者自已解决：
body
{
    color: #000;
    background: #fff;
    text-align: left;
    font-size: 12px;
}

*
{
    margin: 0;
    padding: 0;
}

img
{
    border: 0 none;
}

a:link, a:visited
{
    color: #0065FF;
    text-decoration: none;
}

a:hover
{
    color: #ff5500;
}
ul
{
    list-style: none;
}
.clearing
{
    border-top: 1px solid transparent !important;
    clear: both;
    visibility: hidden;
}

.bg-header
{
    background-image: url(../images/new_header2.png);
}

#header
{
    width: 760px;
    margin: 0 auto;
}

#header #logo a
{
    display: block;
    width: 291px;
    height: 42px;
    margin: 10px 0 0 1px;
}

#header #logo a span
{
    display: none;
}

body.market #header #logo
{
    float: left;
    width: 258px;
    height: 60px;
    background-position: -35px top;
    overflow: hidden;
}
body.market #header #logo a
{
    background: none;
}
body.market #header #top_nav
{
    background-repeat: no-repeat;
    height: 60px;
    overflow: hidden;
    background-position: -290px top;
}

在其中我们会发现
.bg-header
{
    background-image: url(http://img.alimama.cn/images/bg/new_header2.png);
}

这一段就是我们的Banner中用到的图片，呵呵，也许有人认为基本上到此为至了，但是请大家看看这个图片到底是什么哪？

很有意思吧，是一整张图片的集合，其中还包含了其它的图片，乖乖，阿里爸爸这帮兄弟现在也开始用开发游戏里面的技巧了？最开始我以为它用的是javascript实现的图片截取显示，呵呵，后来才发现阿里爸爸的兄弟们才没有像我一样笨哪，而是使用了更加精巧的方式来实现这个功能，就是使用CSS来实现。。。具体实现的CSS我以提纯。见下面的代码：
body
{
    color: #000;
    background: #fff;
    text-align: left;
    font-size: 12px;
}
.bg-header
{
    background-image: url(../images/new_header2.png);
}
#header
{
    width: 760px;
    margin: 0 auto;
}
#header #logo
{
    float: left;
    width: 258px;
    height: 60px;
    background-position: -35px top;
    overflow: hidden;
}

#header #logo a
{
    display: block;
    width: 291px;
    height: 42px;
}

#header #logo a span
{
    display: none;
}
这里面最主要其实就是这一段了height决定了显示上半部分的Banner，而background-position决定了左右坐标选择的范围，还有一个就是overflow:hidden，如果没有这个也许效果会打打折扣的。


#header #logo
{
    float: left;
    width: 258px;
    height: 60px;
    background-position: -35px top;
    overflow: hidden;
}
以上只是本人的肤浅理解，希望对大家有用。

posted on 2008-07-01 13:51 楚广明 阅读(3371) 评论(15) 编辑 收藏

评论

#1楼 　回复　引用　  

原来是这样把整张图片分开组合的,找了好久http://***/
2008-07-01 13:59 | erwq[未注册用户]

#2楼 　回复　引用　  

新浪首页的一些背景处理 也跟这类似4
2008-07-01 14:06 | zzticzh1[未注册用户]

#3楼 　回复　引用　  

想法不错。谢谢
2008-07-01 14:07 | 传奇外挂[未注册用户]

#4楼 　回复　引用　  

这种技术在二年前淘宝上就一直出现，现在仍然在用，是网站前台优化技术的一部分，减少下载量，加快速度
2008-07-01 14:09 | simon4545face[未注册用户]

#5楼 　回复　引用　查看　  

应该去看看 126 的邮箱.
2008-07-01 14:23 | 孤独的灵魂      

#6楼 　回复　引用　  

这是很久很久以前的故事了

我第一次看到这种处理方式是126.com的邮箱样式
2008-07-01 14:25 | csdoc[未注册用户]

#7楼 　回复　引用　查看　  

css sprit嘛
2008-07-01 14:25 | Windie Chai（笑煞天）      

#8楼 　回复　引用　  

不都是这样啊？
还盗版啊？
2008-07-01 14:41 | 磊哥[未注册用户]

#9楼 　回复　引用　查看　  

大惊小怪
2008-07-01 14:44 | 吕      

#10楼 　回复　引用　查看　  

这个图片叫CSS精灵（Sprit），《高性能网站建设指南》里有讲。


广告：欢迎光临[.NET正则表达式库] http://regex-lib.net
2008-07-01 14:52 | Anders Liu      

#11楼 　回复　引用　  

只等C#教程`~~学太杂了~~~我也会变杂的`~~
2008-07-01 14:56 | aa犯得上法d[未注册用户]

#12楼 　回复　引用　  

很老的技术了。。。
2008-07-01 15:16 | ciwei0709[未注册用户]

#13楼 　回复　引用　查看　  

老技巧，google、yahoo用n年了
2008-07-01 21:30 | neoragex2002      

#14楼 　回复　引用　查看　  

呵呵 还没看明白怎么用的 ：）
2008-07-01 23:19 | Kevin Li      

#15楼 　回复　引用　  

访问量大的网站用的多点，呵呵，我的网站(http://www.zyshipin.com)也用到一点，虽然访问量不大，呵呵
2008-07-02 23:17 | 银饰批发[未注册用户]
最新IT新闻:
· 最想要的Entity Framework功能
· 专访Jeffrey Richter：Windows 8是微软的重中之重
· 《福布斯》：谷歌进军硬件产品 难撼动苹果地位
· 美国空军拟最多购买1.8万台iPad 2
· 分析称专利之争让谷歌苹果两败俱伤
» 更多新闻...

导航

<2008年7月>
日一二三四五六
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

公告

公告

个人简介

  • 本名：楚广明
  • 网名：chu888chu888
昵称：楚广明
园龄：5年2个月
荣誉：推荐博客
粉丝：115
关注：3

搜索

 
 

最新随笔

随笔分类(495)

随笔档案(571)

文章分类(5)

积分与排名

  • 积分 - 255110
  • 排名 - 295

阅读排行榜