使用"滑动门"技术设置玻璃材质背景的水平导航菜单

最新推荐文章于 2016-12-15 17:41:00 发布

weixin_34396103

最新推荐文章于 2016-12-15 17:41:00 发布

阅读量110

点赞数

原文链接：http://www.cnblogs.com/likebeta/archive/2012/05/29/2522870.html

版权

本例在CSS中使用"滑动门"技术设置玻璃材质背景的水平导航菜单,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用滑动门技术实现玻璃效果菜单</title>
<style type="text/css">
.menu {
font-family:Arial;
font-size:14px;
width:0 auto 0 0;
background:url(under.gif);
}
.menu ul {
padding:0 0 0 8px;
margin:0;
list-style:none;
height:35px;
display:block;
width:500px;
}
.menu ul li {
float:left;
}
.menu ul li a {
display:block;
line-height:35px;
color:#DDDDDD;
text-decoration:none;
padding:0 0 0 14px;
float:left; //兼容IE
}
.menu ul li a:hover {
color:#FFFFFF;
background:url(hover.gif);
}
.menu ul li a b {
display:block;
padding:0 14px 0 0;
}
.menu ul li a:hover b {
color:#FFFFFF;
background:url(hover.gif) no-repeat right top;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>Connect</b></a></li>
<li><a href="#"><b>Web Dev</b></a></li>
<li><a href="#"><b>Web Design</b></a></li>
<li><a href="#"><b>Map</b></a></li>
</ul>
</div>
</body>
</html>