盗版阿里妈妈之随想

   由于本人的博客申请了阿里妈妈的广告栏，所以有的时候经常上去看看，由于这些年来的职业习惯养成了我只要上一个网站都要习惯性的打看一个网页源程序看看，由于今天上午比较轻闲所以就打算盗版一下阿里妈妈的登录页面，不成想，阿里妈妈的登陆页面里面用到了一个我非常喜欢的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 @   楚广明  阅读(3884)  评论(15)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae