HOME
BBS
深山帮帮欢迎您,您可以注册或者
qq登录只需一步,快速开始
深山旅行社网站管理系统开发完成,欢迎各位网友测试! 点这里测试
565449214 给站长留言
订阅本栏目 RSS您所在的位置: 深山工作室 > HTML学习 > 正文

仿MAC官网导航菜单

www.as1983.com 2007-11-25 22:05:58 深山行者 字体:  浏览 8291 我要评论
使用图片:
点击在新窗口中打开图片


完全应用背景图像X,Y定位;
仿MAC官网导航菜单
注意:
#nav li,#nav li a { background:#fff; }
因为该图片是png透明,所以必须在 li 中设置颜色以挡住 ul 的背景图与 a 的背景图重复叠加。
 
以下是引用片段:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="html,css,js" />
<meta name="description" content="深山行者个人主页" />
<meta name="Author" content="565449214" />
<title>MAC菜单</title>
<style type="text/css">
<!--
html,body { height:100%; background:#fff; }
body { font:12px "宋体",Arial,sans-serif; color:#333; }
body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 { padding:0; margin:0; }
ul,ol,dl { list-style:none; }

#nav { width:982px; height:38px; margin:15px 0 0 10px; overflow:hidden; background:url(http://images.apple.com/global/nav/images/globalnavbg.png) no-repeat; }
#nav li,#nav li a { float:left; display:block; width:117px; height:38px; background:#fff; }
#nav li a { width:100%; text-indent:-9999px; background:url(http://images.apple.com/global/nav/images/globalnavbg.png) no-repeat 0 0; }

#nav .n01 { width:118px; }
#nav .n01 a:visited { background-position:0 -114px; }
#nav .n01 a:hover { background-position:0 -38px; }
#nav .n01 a:active { background-position:0 -76px; }

#nav .n02 a:link { background-position:-118px 0; }
#nav .n02 a:visited { background-position:-118px -114px; }
#nav .n02 a:hover { background-position:-118px -38px; }
#nav .n02 a:active { background-position:-118px -76px; }

#nav .n03 a:link { background-position:-235px 0; }
#nav .n03 a:visited { background-position:-235px -114px; }
#nav .n03 a:hover { background-position:-235px -38px; }
#nav .n03 a:active { background-position:-235px -76px; }

#nav .n04 a:link { background-position:-352px 0; }
#nav .n04 a:visited { background-position:-352px -114px; }
#nav .n04 a:hover { background-position:-352px -38px; }
#nav .n04 a:active { background-position:-352px -76px; }

#nav .n05 a:link { background-position:-469px 0; }
#nav .n05 a:visited { background-position:-469px -114px; }
#nav .n05 a:hover { background-position:-469px -38px; }
#nav .n05 a:active { background-position:-469px -76px; }

#nav .n06 a:link { background-position:-586px 0; }
#nav .n06 a:visited { background-position:-586px -114px; }
#nav .n06 a:hover { background-position:-586px -38px; }
#nav .n06 a:active { background-position:-586px -76px; }

#nav .n07 a:link { background-position:-703px 0; }
#nav .n07 a:visited { background-position:-703px -114px; }
#nav .n07 a:hover { background-position:-703px -38px; }
#nav .n07 a:active { background-position:-703px -76px; }
-->
</style>
</head>
<body>
<div id="nav">
 <ul>
 <li class="n01"><a href="#index" title="index">index</a></li>
 <li class="n02"><a href="#Store" title="Store">Store</a></li>
 <li class="n03"><a href="#Mac" title="Mac">Mac</a></li>
 <li class="n04"><a href="#iPod+iTunes" title="iPod + iTunes">iPod + iTunes</a></li>
 <li class="n05"><a href="#iPhone" title="iPhone">iPhone</a></li>
 <li class="n06"><a href="#Downloads" title="Downloads">Downloads</a></li>
 <li class="n07"><a href="#Support" title="Support">Support</a></li>
 </ul>
</div>
</body>
</html>

Ads loading...
相关阅读
( 2016-6-16 11:49:35 )access数据库做的网站出现.ldb不能删除超过2KB之后就会网站访问不了数据库,提示数据库不存在
( 2015-10-22 17:42:13 )深山旅行社网站管理系统5.0发布
( 2014-10-30 10:46:40 )留言板留言板V7.0
( 2013-10-31 15:05:49 )安卓ES文件浏览器访问电脑上共享文件夹设置
( 2013-12-31 19:47:11 )兼容ie6+和火狐的禁止右键
( 2012-5-11 21:59:57 )深山留言板v4.8 - 5.13母亲节模板
( 2012-4-22 15:07:26 )png显示叉号的解决办法(IE无法显示PNG格式图片的解决办法)
( 2011-8-23 8:29:20 )旅游网站的企业站自定义功能完成。
共有0条关于《仿MAC官网导航菜单》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 400 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

Ads loading...
更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
最新县及县以上1980年以来历史行政区划代码大全截止2018年3月31日
页面里面的js和css的放的位置顺序与加载速度分析
Dreamweaver在onLoad运行_onOpen.htm时,发生了以下javascript错误
Dreamweaver错误:以下翻译器没有被装载,由于错误;xsltransform.htm;有不正确的设置信息
Dreamweaver错误:在onload运行_beforeSave.htm时,发生了一个JavaScript错误
在iframe窗口中打开链接
后台编辑源码里有行号
iframe框架自适应高度代码
Ads loading...
更多>>最新添加文章
批量删除access字段里面fld.Properties.Delete
ASP操作access或sqlserver数据库的函数库
asp采用access数据库搜索信息时因为日文片假名问题提示“Microsoft JET Database Engine 错误80040e14”的解决方法
asp中求两个数的百分比(利用百分比函数FormatPercent就可以自带%的符号)
asp利用sql操作数据表、数据库的一些方法
rs操作数据表记录集对象的方法
asp利用dateadd获得上个月、本月、下个月的第一天和最后一天
asp随机显示字符长度与类型(可随机显示数字、小写字母、大写字母,可以做为随机密码使用)
  • 业务 QQ:565449214
  • 手机:139 6134 7334
更多>>随机抽取信息
Google的265导航站上顶部右边的logo上的眼珠特效 (兼容IE,FF)
实现windows关机效果代码
网站内容中某个关键字相关右键菜单
一行两列的CSS设置代码
购物时某件商品倒计时销售非常不错
理解css里的!important是什么意思?
asp之自动闭合HTML标签函数
css翻页代码
Ads loading...