当前位置：首页 → 问答吧 → 从apple网站上抠下来的导航，分享给大家

从apple网站上抠下来的导航，分享给大家

时间：2010-07-07

来源：互联网

这是图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> html,body,div,ul,ol,li{ margin: 0; padding: 0; } ul,ol { list-style: none; } img { border: 0; } /* GLOBALHEADER */ #globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; } #globalheader #globalnav { margin: 0; padding: 0; zoom: 1; width: 100%;} #globalheader #globalnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #globalheader #globalnav li { display: inline; } #globalheader #globalnav li a { float: left; width: 103px; height: 0; padding-top: 38px; overflow: hidden; background-image: url(http://images.apple.com/global/nav/images/globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; } #globalheader #globalsearch { background-image: url(http://images.apple.com/global/nav/images/globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; } /* BUTTONS */ #globalheader #globalnav li#gn-apple a { background-position: 0 0; } #globalheader #globalnav li#gn-store a { background-position: -103px 0; } #globalheader #globalnav li#gn-mac a { background-position: -206px 0; } #globalheader #globalnav li#gn-ipod a { background-position: -309px 0; } #globalheader #globalnav li#gn-iphone a { background-position: -412px 0; } #globalheader #globalnav li#gn-ipad a { background-position: -515px 0; } #globalheader #globalnav li#gn-itunes a { background-position: -618px 0; } #globalheader #globalnav li#gn-support a { background-position: -721px 0; } /* OVER STATES */ #globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; } #globalheader #globalnav li#gn-store a:hover { background-position: -103px -38px; } #globalheader #globalnav li#gn-mac a:hover { background-position: -206px -38px; } #globalheader #globalnav li#gn-ipod a:hover { background-position: -309px -38px; } #globalheader #globalnav li#gn-iphone a:hover { background-position: -412px -38px; } #globalheader #globalnav li#gn-ipad a:hover { background-position: -515px -38px; } #globalheader #globalnav li#gn-itunes a:hover { background-position: -618px -38px; } #globalheader #globalnav li#gn-support a:hover { background-position: -721px -38px; } /* PRESSED STATES */ #globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; } #globalheader #globalnav li#gn-store a:active { background-position: -103px -76px; } #globalheader #globalnav li#gn-mac a:active { background-position: -206px -76px; } #globalheader #globalnav li#gn-ipod a:active { background-position: -309px -76px; } #globalheader #globalnav li#gn-iphone a:active { background-position: -412px -76px; } #globalheader #globalnav li#gn-ipad a:active { background-position: -515px -76px; } #globalheader #globalnav li#gn-itunes a:active { background-position: -618px -76px; } #globalheader #globalnav li#gn-support a:active { background-position: -721px -76px; } /* ON STATES */ #globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; } #globalheader.store #globalnav li#gn-store a { background-position: -103px -114px !important; } #globalheader.mac #globalnav li#gn-mac a { background-position: -206px -114px !important; } #globalheader.ipod #globalnav li#gn-ipod a { background-position: -309px -114px !important; } #globalheader.iphone #globalnav li#gn-iphone a { background-position: -412px -114px !important; } #globalheader.ipad #globalnav li#gn-ipad a { background-position: -515px -114px !important; } #globalheader.itunes #globalnav li#gn-itunes a { background-position: -618px -114px !important; } #globalheader.support #globalnav li#gn-support a { background-position: -721px -114px !important; } /* GLOBAL SEARCH */ #globalsearch { width: 158px; height: 38px; position: absolute; top: 0; right: 0; background-position: 100% 0; background-repeat: no-repeat; } </style> </head> <body> <DIV id=globalheader> <UL id=globalnav> <LI id=gn-apple><A href="#">Apple</A> <LI id=gn-store><A href="#">Store</A> <LI id=gn-mac><A href="#">Mac</A> <LI id=gn-ipod><A href="#">iPod</A> <LI id=gn-iphone><A href="#">iPhone</A> <LI id=gn-ipad><A href="http://www.websjy.com/">iPad</A> <LI id=gn-itunes><A href="http://www.websjy.com/bbs/">iTunes</A> <LI id=gn-support><A href="http://www.websjy.com/my/">Support</A> </LI></UL> <DIV id=globalsearch> </DIV></DIV> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 happy175 于 2010-7-7 15:05 编辑 ]

附件

globalnavbg.gif (26.63 KB)

2010-7-7 15:00

作者: happy175 发布时间: 2010-07-07

很不错的效果~
谢谢分享

作者: KOEN301 发布时间: 2010-07-07

挺不错的效果，谢谢楼主的分享啦,

作者: atlantis2007 发布时间: 2010-07-07

非常好，准备用到自己的网站，谢谢了

作者: jj789 发布时间: 2010-07-07

也可以自己改一下图片，方法就是这样的

作者: happy175 发布时间: 2010-07-25

非常好

作者: smartpang 发布时间: 2010-07-26

其实也谈不上什么方法。。。仔细的人一眼就能看出来，苹果的这个导航只是做到了极度细致。基本上为每一个link visited hover active 都做了样式。
顺便说一下，建议lz代码写成小写，id和class后面注意双引号~,并且留意缩进
例如
<div class="big-apple">
<ul>
<li id="apple"><a href="#">apple</a></li>
</ul>
</div>

作者: maomidog 发布时间: 2010-07-28

不错的东西

作者: qiantian 发布时间: 2010-07-28

从细节出手

作者: ycookie 发布时间: 2010-07-28

谢谢分享。