网页特效代码：文字变化的导航菜单

作者：佚名类型:转载来源:网页教学网

　　用CSS制作的文字变化的导航菜单：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>
#nav {
FONT-SIZE: 12px; LIST-STYLE-TYPE: none
}
#nav LI {
FLOAT: left; MARGIN-RIGHT: 1px
}
.bi {
POSITION: relative
}
#nav LI A {
DISPLAY: block; WIDTH: 65px; COLOR: #000000; LINE-HEIGHT: 30px;
TEXT-ALIGN: center; TEXT-DECORATION: none
}
.bi SPAN {
LEFT: -999px; VISIBILITY: hidden; POSITION: absolute;
}
.bi:hover SPAN {
DISPLAY: block; WIDTH: 65px; COLOR: #000000; LINE-HEIGHT: 30px;
TEXT-ALIGN: center; TEXT-DECORATION: none;
LEFT: 0px; VISIBILITY: visible; CURSOR: pointer; TOP: 0px;
BACKGROUND: #ffffff 30px 8px; COLOR: #000000; LINE-HEIGHT: 29px
}
#nav LI A:hover {
BACKGROUND: #ffffff 30px 8px; COLOR: #000000; LINE-HEIGHT: 29px
}
</STYLE>
<BODY>
<UL id=nav>
<LI><A class=bi
href="#">网页教学Home</A> </LI>
<LI><A class=bi
href="#">产品购买Products</A> </LI>
<LI><A class=bi
href="#">服务支持Services</A>
</LI>
<LI><A class=bi
href="#">技术交流FAQ</A>
</LI>
<LI><A class=bi
href="#">方案案例E-solution</A>
</LI>
<LI><A class=bi
href="#">关于京成About</A> </LI>
<LI><A class=bi
href="#">联系我们Contact
Us</A> </LI>
<LI><A class=bi
href="#">加入我们Join</A>
</LI>
<LI><A class=bi
href="#">下载支持Download</A>
</LI></UL></BODY></HTML>

责任编辑:silvia 时间:2009年11月16日

上一篇:
Flex 实现的相册效果（Flex 3.0，as3.0
没有相关教材

最近更新

查看所有评论

网页特效代码：文字变化的导航菜单

作者：佚名 类型:转载 来源:网页教学网

作者：佚名类型:转载来源:网页教学网