DivCSS实例:CSS菜单Flash效果用图片模拟实现_DIV+CSS实例
教程Tag:暂无Tag,欢迎添加,赚取U币!
DivCSS实例:CSS菜单FLASH效果 用图片模拟实现
CSS网页布局,强调文档具有良好的结构语义,在以往的Web开发中,我们在页面中嵌入Flash,使网站页面具有良好的动感视觉效果,以Flash的形式创建网页导航菜单也是非经常用的方法。但这样的形式使文档的语义结构不明确,更要命的是,对于SEO(搜索引擎优化)这种形式更是一点儿作用都没有,搜索引擎蜘蛛无法获取菜单的链接目标。
我们关注标准,注重用户体验,也需要兼顾文档的语义结构与SEO优化,MB5U认为以一种变通的方法可以实现。虽然不如真正的Flash有着炫目的效果,但这样的形式也是一种切实可行的办法。
具体的思路是,创建一个链接,将原本的链接文字隐藏掉,置入一个图片(静止的图片)作为链接状态的背景,在链接的悬停状态,重新置入一个图片(动画图片)作为链接状态的背景。
获得的效果是,在正常状态下链接是一个静止不动的图片,当鼠标移到链接区域,即在链接的悬停状态下,背景图片变换成为一张动画图片。
以下是预备好的两张图片:
XHTML编码:
CSS编码:
CSS编码释义:
menu部分,设置div容器的宽度为150px,设置上下外边距为50px,左右为自动实现水平居中对齐。
menu a部分,将链接元素转换为块元素,设置其宽度与高度。设置文本缩进为160px,将链接文字“推”到了可视区域以外,但仅这样做实现不了隐藏链接文本,紧接着设置强制文本在一行内显示,溢出为隐藏。设置链接的背景图片为btn1.gif,不重复,位于0 0坐标。
menu a:hover部分,设置链接的悬停状态,仅将背景图片改为btn2.gif。
最终的运行效果:
CSS网页布局,强调文档具有良好的结构语义,在以往的Web开发中,我们在页面中嵌入Flash,使网站页面具有良好的动感视觉效果,以Flash的形式创建网页导航菜单也是非经常用的方法。但这样的形式使文档的语义结构不明确,更要命的是,对于SEO(搜索引擎优化)这种形式更是一点儿作用都没有,搜索引擎蜘蛛无法获取菜单的链接目标。
我们关注标准,注重用户体验,也需要兼顾文档的语义结构与SEO优化,MB5U认为以一种变通的方法可以实现。虽然不如真正的Flash有着炫目的效果,但这样的形式也是一种切实可行的办法。
具体的思路是,创建一个链接,将原本的链接文字隐藏掉,置入一个图片(静止的图片)作为链接状态的背景,在链接的悬停状态,重新置入一个图片(动画图片)作为链接状态的背景。
获得的效果是,在正常状态下链接是一个静止不动的图片,当鼠标移到链接区域,即在链接的悬停状态下,背景图片变换成为一张动画图片。
以下是预备好的两张图片:
btn1.gif (静止的图片)
btn2.gif (动画图片)
btn2.gif (动画图片)
XHTML编码:
示例代码 [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>
<a href="http://www.mb5u.com/" title="Div CSS教程" target="_blank">CSS Web Design 模板无忧 - www.MB5U.com</a>
</div>
CSS编码:
示例代码 [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;
}
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。
最终的运行效果:
代码调试框 [www.mb5u.com]
相关DIV+CSS实例:
- 相关链接:
- 教程说明:
DIV+CSS实例-DivCSS实例:CSS菜单Flash效果用图片模拟实现。