盗版阿里妈妈之随想

   由于本人的博客申请了阿里妈妈的广告栏，所以有的时候经常上去看看，由于这些年来的职业习惯养成了我只要上一个网站都要习惯性的打看一个网页源程序看看，由于今天上午比较轻闲所以就打算盗版一下阿里妈妈的登录页面，不成想，阿里妈妈的登陆页面里面用到了一个我非常喜欢的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;
}
以上只是本人的肤浅理解，希望对大家有用。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chu888chu888/p/1233150.html