CSS菜单Flash效果用CSS图片实现－站长资讯网info110.com

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

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

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

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

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

btn1.gif （静止的图片）

btn2.gif （动画图片）

XHTML编码：

Example Source Code [www.mb5u.com]

<div id="menu">
<a href="http://www.mb5u.com/" title="Div CSS教程" target="_blank">CSS Web Design 模板无忧 - www.MB5U.com</a>
</div>

CSS编码：

Example Source Code [www.mb5u.com]

#menu {
width:150px;
margin:50px auto;
}
#menu a {
display:block;
width:150px;
height:30px;
text-indent:160px;
white-space:nowrap;
background:url(btn1.gif) no-repeat 0 0;
overflow:hidden;
}
#menu a:hover {
background:url(btn2.gif) no-repeat 0 0;
}

CSS编码释义：
　　menu部分，设置div容器的宽度为150px，设置上下外边距为50px，左右为自动实现水平居中对齐。
　　menu a部分，将链接元素转换为块元素，设置其宽度与高度。设置文本缩进为160px，将链接文字“推”到了可视区域以外，但仅这样做实现不了隐藏链接文本，紧接着设置强制文本在一行内显示，溢出为隐藏。设置链接的背景图片为btn1.gif，不重复，位于0 0坐标。
　　menu a:hover部分，设置链接的悬停状态，仅将背景图片改为btn2.gif。

最终的运行效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DivCSS实例：CSS菜单FLASH效果用图片模拟实现</title>
<style type="text/css">
#menu {
width:150px;
margin:50px auto;
}
#menu a {
display:block;
width:150px;
height:30px;
text-indent:160px;
white-space:nowrap;
background:url(/uploads/divcss/t2008216154714.gif) no-repeat 0 0;
overflow:hidden;
}
#menu a:hover {
background:url(/uploads/divcss/o200821615486.gif) no-repeat 0 0;
}
</style>
</head>
<body>
<div id="menu">
<a href="/tz.php?url=www.mb5u.com/" _fcksavedurl="/tz.php?url=www.mb5u.com/" title="Div CSS教程" target="_blank">CSS Web Design 模板无忧 - www.MB5U.com
</div>
<p style="text-align:center; margin-top:100px"><a href="/tz.php?url=www.mb5u.com/" _fcksavedurl="/tz.php?url=www.mb5u.com/" title="DivCSS教程" style="font-size:15px; color:#03c; font-weight:800;" target="_blank">，如需转载请保留本链接MB5U（www.mb5u.com）</p>
</body>
</html>.

TAG: Flash效果 CSS