简单的玻璃材质导航栏

最新推荐文章于 2018-02-06 21:12:39 发布

原创最新推荐文章于 2018-02-06 21:12:39 发布 · 842 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#导航栏 #滑动门

javascript&html 专栏收录该内容

23 篇文章

订阅专栏

效果

code

<!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=utf-8" />
<title>玻璃特效的导航菜单</title>
<style type="text/css">
body{
	margin:0;
	margin-top:20px;
	}
ul#menu{
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
	background-image:url(images/under.gif);
	padding:0 0 0 8px;
	list-style:none;
	height:35px;
	}
#menu li{
	float:left;
	}
 a{
	display:block;
	line-height:35px;
	color:#ddd;
	text-decoration:none;
	padding:0 0 0 10px;
	}
a:hover{
	color:#fff;
	background-image:url(images/hover.gif);
	}
a:hover strong{
	color:#fff;
	background:url(images/hover.gif) no-repeat right top ;
	}
strong{
	display:block;
	padding:0 10px 0 0;
	}
</style>
</head>

<body>
<ul id="menu">
<li><a href="#1"><strong>主页</strong></a></li>
<li><a href="#1"><strong>科技频道</strong></a></li>
<li><a href="#1"><strong>时尚频道</strong></a></li>
<li><a href="#1"><strong>教育频道</strong></a></li>
</ul>
</body>
</html>