订阅本栏目 RSS您所在的位置: 深山工作室 > HTML > 正文

仿MAC官网导航菜单

www.as1983.com 2007/11/25 22:05:58 深山行者 字体: 浏览 10148
使用图片:



完全应用背景图像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>

相关阅读
asp许愿墙程序终于设计得差不多了,现在开放
超级实用且不花哨的js代码大全( 3 )
生成随机字符串的函数
设置个性的文字链接样式,集齐网页上常见的链接样式
ASP汉字转拼音,支持自定义特殊词语
详谈CSS设计中import与link的区别所在
蒸汽消音器
右下角弹出框带关闭,非常不错,可以用于后台提示
共有0条关于《仿MAC官网导航菜单》的评论
发表评论
正在加载评论......
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
网友评论声明,请自觉遵守互联网相关政策法规。

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

更多信息>>栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
更多>>同类信息
查询某个字符在字符串中出现的位置数组
jQuery设置提交表单disabled属性所有input、button、extarea、select、checkbox、radio都生效
window.location.href跳转无反应不跳转解决
window.location.href和setTimeout结合时间错误
Object.assign的一些用法
各种钱货币字母转换对应的符号
更多>>最新添加文章
名扬石化设备
连云港振辉旋膜式除氧器
亿菇缘
消声器
放心会计
汽液两相流
连云港门窗制作
胶球清洗
更多>>随机抽取信息
国内各大搜索引擎的蜘蛛名称列表
超级酷的滚动条颜色代码生成器
购物网上图片放大效果
中国青岛春秋国际旅行社有限公司
uni-app判断当前客户端是安卓还是ios还是其它平台
丽江云杉旅行网