首页 > 开发 > CSS > 正文

DivCSS实例：CSS菜单Flash效果用图片模拟实现

2024-07-11 08:40:40

字体：大中小

来源：转载

供稿：网友

　　DivCSS实例：CSS菜单FLASH效果用图片模拟实现

　　CSS网页布局，强调文档具有良好的结构语义，在以往的Web开发中，我们在页面中嵌入Flash，使网站页面具有良好的动感视觉效果，以Flash的形式创建网页导航菜单也是非经常用的方法。但这样的形式使文档的语义结构不明确，更要命的是，对于SEO（搜索引擎优化）这种形式更是一点儿作用都没有，搜索引擎蜘蛛无法获取菜单的链接目标。

　　我们关注标准，注重用户体验，也需要兼顾文档的语义结构与SEO优化，MB5U认为以一种变通的方法可以实现。虽然不如真正的Flash有着炫目的效果，但这样的形式也是一种切实可行的办法。

　　具体的思路是，创建一个链接，将原本的链接文字隐藏掉，置入一个图片（静止的图片）作为链接状态的背景，在链接的悬停状态，重新置入一个图片（动画图片）作为链接状态的背景。

　　获得的效果是，在正常状态下链接是一个静止不动的图片，当鼠标移到链接区域，即在链接的悬停状态下，背景图片变换成为一张动画图片。

　　以下是预备好的两张图片：

btn1.gif （静止的图片）

btn2.gif （动画图片）

XHTML编码：

示例代码 [www.CuoXIn.com]

上一篇：DivCSS实例：符合web标准的嵌入Flash的方法-JS调用

下一篇：DivCSS布局实例：很实用的图文混排CSS列表-富有语义

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注