|
购物专题 | 基金专题 | 性专题 | 饮食专题 | 教育专题 | 生活大参考 | 园林资讯 | 园艺库 | 健康专题 | |
| 论文专题 | 家庭养花 | 园林景观 | 盆景奇石 | 激情图库 | 农业资料库 | 园林古建 | 英文站 | 花卉栽培 |
根据页面设计的需要，有时候我们使用图象翻转菜单，所谓图象翻转菜单是指在链接状态、鼠标激活状态实现不同的图片效果。
在通常的图象翻转菜单制作中，会出现闪烁的情况，这是因为图片载入延时所造成的，也就是图象还未完全加载没能完全显示，加载时间的间隔就会出现闪烁的现象。
我们今天所要讨论的是将图象翻转菜单的多种状态制作成一张图片，我们应用css对背景图片的位置进行控制，进而实现一张图片多种状态的图象翻转菜单效果。
我们先看看下面的这张图片。
这张图片从上至下结合了三个不同的状态，链接样式，激活样式，当前页样式。
来看下面的css代码：
#nav {height:43px; width:700px; margin:18px 0 0 38px;}
#nav ul {
font-size:12px;
color:#000;
}
#nav li {
width:115px;
height:43px;
display:block;
float:left;
list-style-type:none;
margin-right:2px;
overflow:hidden;
}
#nav li a {
display:block;
width:115px;
height:43px;
padding:50px 0 0 0;
overflow:hidden;
text-align:center;
}
#nav li a.an {background: url(buttom.jpg) no-repeat 0 0;}
#nav li a:hover {background-position: 0 -43px;}
#nav li a.dang {background-position: 0 -86px;}
我们来看下面的xhtml代码：
<div id="nav">
<ul>
<li><a href="http://www.IT130.cn/" class="an dang" >IT130.cn</a></li>
<li><a href="http://www.IT130.cn/" class="an" >IT130.cn</a></li>
<li><a href="http://www.IT130.cn/" class="an" >IT130.cn</a></li>
<li><a href="http://www.IT130.cn/" class="an" >IT130.cn</a></li>
<li><a href="http://www.IT130.cn/" class="an" >IT130.cn</a></li>
</ul>
</div>
#nav li声明了图象按钮区域的宽高，去掉了列表标记，并且设置右边距两个象素，溢出部分直接隐藏。
#nav li a同样声明了宽与高，溢出部分直接隐藏。设置了内边距，距离顶部50px，这一设置有什么作用呢？我们需要考虑一种情况的发生，如果用户在浏览网页的时间，由于网速等原因没有能加载css文件，那用户根本没有办法点击链接，因为链接的定义全部写在css文件中，我们除了应用图片区域块的无序列表的链接，还应该加上文字链接，这样就不必担心没有CSS文件无法访问。同时也有利于SEO，让搜索引擎更容易的抓取网站上的内容。文字链接是不能与图片区域重合的，这样就会发生重叠影响美观，我们设置距离顶部50px，文字已经位于图象区域以外，并且设置了溢出部分直接隐藏。在正常情况下是看不到文字链接的。在下面的运行效果中，你可以去掉CSS样式定义看看实际效果。
#nav li a.an 声明了名称为an的类的背景图片，不重复，位置是距顶距左均为0.
#nav li a:hover 声明了激活时背景图片的位置，距顶部-43px；也就实现了图片中间位置那一按钮的效果。
#nav li a.dang 声明了当前页图片的位置，距顶部-86px；也就实现了图片最下面位置那一按钮的效果。这三个CSS代码中，最重要的就是background-position属性，关于background-position的说明，请点击这里。
细心的你一定注意到在无序列表的第一个链接中，我们使用了class="an dang"，这是一种特殊的声明方式，大家在实际使用中可以灵活的应用，这一声明表示，这一链接，使用an与dang双重效果。
请您特别注意：class="an dang"的结合运用效果，就实现了当前页指引，我们不需要修改任何样式与图片，只需要在当前栏目的 class="an"更改为class="an dang"即可。
完整的示例代码如下：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IT130.cn</title>
<style type="text/css">
<!--
* {margin:0; padding:0; border:0; background-color:#fff; font-size:12px; color:#000;}
#nav {height:43px; width:700px; margin:18px 0 0 38px;}
#nav ul {
font-size:12px;
color:#000;
}
#nav li {
width:115px;
height:43px;
display:block;
float:left;
list-style-type:none;
margin-right:2px;
overflow:hidden;
}
#nav li a {
display:block;
width:115px;
height:43px;
padding:50px 0 0 0;
overflow:hidden;
text-align:center;
}
#nav li a.an {background: url(attachments/month_0701/72007131232811.jpg) no-repeat 0 0;}
#nav li a:hover {background-position: 0 -43px;}
#nav li a.dang {background-position: 0 -86px;}
#colorbar { width:100％;height:38px;background:#c00;}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#" class="an" >IT130.cn</a></li>
<li><a href="#" class="an">IT130.cn</a></li>
<li><a href="#" class="an dang" >IT130.cn</a></li>
<li><a href="#" class="an" >IT130.cn</a></li>
<li><a href="#" class="an" >IT130.cn</a></li>
</ul>
</div>
<div id="colorbar"></div>
</body>
</html>
浙ICP备 ：07003766号 Copyright © 2001-2007 JUBAO163,All rights reserved. |
