源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS/HTML] 图片翻转菜单技术研究

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2006-9-25 00:00:00 | 显示全部楼层 |阅读模式
Fastcompany是simplebits.com站长的全CSS+Div布局作品.

网站导航采用的是CSS图片翻转.不用多想肯定是利用a:link和a:hover等不同状态下利用显示不同的background-images制作而成.我认为作者的独到之处在于CSS中的a:hover...

#nav a:hover {background-position: 0 -20px;}
#nav a:active {background-position: 0 -40px;}




导航的背景图片在a:link和a:hover,a:active的三种状态下不是三张而是用了同一张图片~通过css对背景纵向定位使得按钮改变.这样做省去了对每个按钮背景图片的单个定义,节省了大量代码,图片变少了,下载起来更快,更易管理.

按钮中不单单是一个背景图片,里面也有导航文字.


<li id="thome"><a href="http://www.fastcompany.com/" class="selected">Home</a></li>


用css将文字隐藏


#nav a {padding: 20px 0 0 0;overflow: hidden;}


既然隐藏了为什么还要写文字呢?目的在于当使用纯文本浏览器(或不引用任何CSS时)也能够看到导航链接.
回复

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-8 16:26:58 | 显示全部楼层
hi哦回复iOS就看见
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2022-12-30 04:48:08 | 显示全部楼层
搞个免费的用用
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-1-8 22:51:09 | 显示全部楼层
我要金豆金豆金豆
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2023-2-7 10:12:26 | 显示全部楼层
hi哦回复iOS就看见
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

79

积分

注册会员

Rank: 2

积分
79
发表于 2023-2-11 05:28:38 | 显示全部楼层
看看看看
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-3-26 01:52:15 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

27

主题

2万

回帖

331

积分

中级会员

Rank: 3Rank: 3

积分
331
发表于 2023-8-25 21:43:54 | 显示全部楼层
谢谢下载来看看
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-3 17:30:38 | 显示全部楼层
儿飞飞微风DVD谁vdsvd
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

380

积分

中级会员

Rank: 3Rank: 3

积分
380
发表于 2023-9-30 02:48:10 | 显示全部楼层
谢谢小Y分享
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-12-3 05:44 , Processed in 0.096833 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表