MAC官方菜单纯CSS实现灰色会换色

ttx9n · 发表于 2009-11-3 23:03:24

MAC官方网站的菜单,实际上是看着好看,但看了代码感觉不太实用,因为为了实现这么一个效果代码太繁琐,而且菜单修改起来也极不方便,建议大家以学习的态度阅读源码. 请注意里面的背景图片是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" /> 
<title>MAC菜单</title> 
<style type="text/css"> 
 
</style> 
</head> 
<body> 
 
    <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> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

kwa3hgmjp · 发表于 2022-10-4 19:13:07

谢谢分享，先下来用用

errol123 · 发表于 2023-1-31 18:40:12

儿飞飞微风DVD谁vdsvd

fiyeid · 发表于 2023-10-17 01:57:05

。。。。。。。。。。。。。。。

thywok · 发表于 2023-10-21 10:35:15

谢谢您的分享！

wqpa63gz · 发表于 2024-7-18 15:53:46

额风风风微风微风违法

6q8s6p21 · 发表于 2024-9-11 06:00:32

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

errol123 · 发表于 2024-9-18 17:36:27

你们谁看了弄洒了可能

qq303604905 · 发表于 2024-9-24 12:41:19

看看看咋么

hd1tvqb3 · 发表于 2024-10-15 16:06:01

需要很久了终于找到了

账号		自动登录	找回密码
密码			立即注册

[JavaScript] MAC官方菜单纯CSS实现灰色会换色

相关帖子