盗版阿里妈妈之随想

   由于本人的博客申请了阿里妈妈的广告栏,所以有的时候经常上去看看,由于这些年来的职业习惯养成了我只要上一个网站都要习惯性的打看一个网页源程序看看,由于今天上午比较轻闲所以就打算盗版一下阿里妈妈的登录页面,不成想,阿里妈妈的登陆页面里面用到了一个我非常喜欢的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 @ 2008-07-01 13:51 楚广明 阅读(2302) 评论(15)  编辑 收藏 网摘

  回复  引用    
#1楼2008-07-01 13:59 | erwq[未注册用户]
原来是这样把整张图片分开组合的,找了好久http://***/
  回复  引用    
#2楼2008-07-01 14:06 | zzticzh1[未注册用户]
新浪首页的一些背景处理 也跟这类似4
  回复  引用    
#3楼2008-07-01 14:07 | 传奇外挂[未注册用户]
想法不错。谢谢
  回复  引用    
#4楼2008-07-01 14:09 | simon4545face[未注册用户]
这种技术在二年前淘宝上就一直出现,现在仍然在用,是网站前台优化技术的一部分,减少下载量,加快速度
  回复  引用  查看    
#5楼2008-07-01 14:23 | 孤独的灵魂      
应该去看看 126 的邮箱.

  回复  引用    
#6楼2008-07-01 14:25 | csdoc[未注册用户]
这是很久很久以前的故事了

我第一次看到这种处理方式是126.com的邮箱样式

  回复  引用  查看    
#7楼2008-07-01 14:25 | Windie Chai(笑煞天)      
css sprit嘛
  回复  引用    
#8楼2008-07-01 14:41 | 磊哥[未注册用户]
不都是这样啊?
还盗版啊?

  回复  引用  查看    
#9楼2008-07-01 14:44 |       
大惊小怪
  回复  引用  查看    
#10楼2008-07-01 14:52 | Anders Liu      
这个图片叫CSS精灵(Sprit),《高性能网站建设指南》里有讲。


广告:欢迎光临[.NET正则表达式库] http://regex-lib.net" target="_new">http://regex-lib.net

  回复  引用    
#11楼2008-07-01 14:56 | aa犯得上法d[未注册用户]
只等C#教程`~~学太杂了~~~我也会变杂的`~~
  回复  引用    
#12楼2008-07-01 15:16 | ciwei0709[未注册用户]
很老的技术了。。。
  回复  引用  查看    
#13楼2008-07-01 21:30 | neoragex2002      
老技巧,google、yahoo用n年了
  回复  引用  查看    
#14楼2008-07-01 23:19 | Kevin Li      
呵呵 还没看明白怎么用的 :)
  回复  引用    
#15楼2008-07-02 23:17 | 银饰批发[未注册用户]
访问量大的网站用的多点,呵呵,我的网站(http://www.zyshipin.com)也用到一点,虽然访问量不大,呵呵



发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1233150




相关文章:

相关链接: