楚广明的博客
教育不是灌溉,是点燃火焰
社区
新随笔
联系
管理
随笔- 63 文章- 12 评论- 776
盗版阿里妈妈之随想
由于本人的博客申请了阿里妈妈的广告栏,所以有的时候经常上去看看,由于这些年来的职业习惯养成了我只要上一个网站都要习惯性的打看一个网页源程序看看,由于今天上午比较轻闲所以就打算盗版一下阿里妈妈的登录页面,不成想,阿里妈妈的登陆页面里面用到了一个我非常喜欢的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)
编辑
收藏
网摘
发表评论
1242973
回复
引用
#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
链接:
切换模板
导航:
网站首页
社区
新闻
博问
闪存
网摘
招聘
找找看
Google搜索
China-pub 计算机图书网上专卖店!6.5万品种 2-8折!
China-Pub 计算机绝版图书按需印刷服务
相关文章:
最新IT新闻:
竞争日趋激烈 微软欲借 Windows 7 扭转战局
上海电信计划2012年80%用户实现100M带宽
数万名网友签名抗议星际争霸2取消局域网功能
Silverlight打造杰克逊纪念专题
传诺基亚正在开发Android手机
相关链接:
公告
公告
个人简介
本名:楚广明
网名:chu888chu888
与我联系
发短消息
留言簿
给我留言
查看留言
我参与的团队
大连.NET俱乐部(0/0)
大连微软程序员俱乐部 (0/0)
随笔档案
(62)
2009年7月 (1)
2009年5月 (1)
2009年4月 (2)
2009年3月 (4)
2009年1月 (2)
2008年12月 (4)
2008年11月 (6)
2008年10月 (3)
2008年9月 (1)
2008年8月 (3)
2008年7月 (12)
2008年6月 (9)
2008年5月 (1)
2008年4月 (1)
2008年3月 (1)
2008年2月 (2)
2007年12月 (1)
2007年4月 (1)
2007年3月 (1)
2007年2月 (2)
2007年1月 (2)
2006年12月 (2)
文章分类
(5)
C#编程(5)
(rss)
最新随笔
1. 敏捷日记
2. 转--开发Android时出现的问题,做个标记,以后好用
3. 使用FlexiGrid实现Extjs表格的效果
4. 精品图书大推荐-2
5. 再推几本好书,希望大家好好学习,天天向上
6. 学习Jquery的好书
7. 推荐一本学习ASP.NET MVC的书
8. 禁止在 .NET Framework 中执行用户代码。启用 "clr enabled" 配置选项
9. 使用Socket进行简单的通信
10. Java程序员请低下您那高昂的头
积分与排名
积分 - 107143
排名 - 519
阅读排行榜
1. 我的C#课件,喜欢的可以自由下载了。。有十几个哪,我慢慢更新吧。。。(7887)
2. 最大最全的VSS教程!提供word版本下载!(5693)
3. 功能很强大的UI封装类(5367)
4. 楚广明C#简明教程第四讲(5169)
5. Java程序员请低下您那高昂的头(4975)
6. 非常清凉简洁的图片演示风格->>JavaScript实现(4900)
7. 程序员之殇(3979)
8. 使用FlexiGrid实现Extjs表格的效果(3729)
9. 关爱年青一代程序员的人生(3541)
10. C#实战项目第一集(3495)