状态玻璃效果菜单(实例)

by admin on 2020年1月22日

   <html>
<head>
<title>立体竖直排列菜单</title>
<style type=”text/css”>
a{
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
}
#menu{
width:100px;
height:auto;
text-align:left;
}
#menu a:link,#menu a:visited{
color:#fff;
text-decoration:none;
text-align:center;
width:100px;
padding:4px;
margin:4px auto;
background-color:#8ab;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
position:relative;
}
#menu a:hover,#menu a:active{
top:2px;
left:2px;
border-color:#345 #cde #def #678;
}
</style>
</head>
<body>
<div id=”menu”>
<a href=””>首页</a>
<a href=””>博客</a>
<a href=””>相册</a>
<a href=””>下载</a>
<a href=””>留言</a>
<a href=””>关于</a>
</div>
</body>
</html>

转自:

在线演示地址如下:

 

<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>无标题文书档案</title>
<style type=”text/css”>
#menu ul{
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 padding:0px 0px 0px 8px;
 margin:0px auto;
 list-style:none;
 height:35px;
 white-space:nowrap;
 }
#menu ul li{
 float:left;
 margin:0px 2px;
 } 
#menu ul li a{
 display:block;
 float:left;
 line-height:35px;
 color:#666;
 text-decoration:none;
 padding:0px 0px 0px 14px;
 background:url(bj.gif);
 }
#menu ul li a b{
 display:block;
 padding:0px 14px 0px 0px;
 background:url(bj.gif) no-repeat right top;
 }
#menu ul li a:hover{
 color:#fff;
 background:url(bj.gif) left center;
 }
#menu ul li a:hover b{
 background:url(bj.gif) right center;
 }
#menu ul li.current a{
 color:#fff;
 background:url(bj.gif) no-repeat left bottom;
 background:url(bj.gif) no-repeat right bottom;
 }
#menu ul li.current a:hover{
 background:url(bj.gif) no-repeat left bottom;
 cursor:default;
 }
#menu ul li.current a:hover b{
 background:url(bj.gif) no-repeat right bottom;
 }
</style>
</head>

<html>
<head>
<title>立体竖直排列菜单</title>
<style type=”text/css”>
a{
font-family:Arial, Helvetica,
sans-serif;
font-size:24px;
}
#menu{
width:100px;
height:auto;
text-align:left;
}
#menu a:link,#menu a:visited{
color:#fff;
text-decoration:none;
text-align:center;
width:100px;
padding:4px;
margin:4px auto;
background-color:#8ab;
border:2px solid
#fff;
border-color:#def #678 #345
#cde;
position:relative;
}
#menu a:hover,#menu a:active{
top:2px;
left:2px;
border-color:#345 #cde #def
#678;
}
</style>
</head>
<body>
<div
id=”menu”>
<a
href=”;
<a
href=”;
<a
href=”;
<a
href=”;
<a
href=”;
<a
href=”;
</div>
</body>
</html>

<body>
<div id=”menu”>
<ul>
<li><a
href=”#”><b>Home</b></a></li>
<li><a href=”#”><b>Contact
Us</b></a></li>
<li><a href=”#”><b>Web
Dev</b></a></li>
<li><a href=”#”><b>Web
Design</b></a></li>
<li class=”current”><a
href=”#”><b>Map</b></a></li>
</ul>
</div>
</body>
</html>

 

 

 

        

 

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>CSS_Tab简洁版</title>
<style type=”text/css”>
body{margin:0; font-size:12px; background:#666;}
#box{width:400px; height:300px; margin:100px auto 0;}
#tab_nav{margin:0; padding:0; height:25px; line-height:24px;}
#tab_nav li{float:left; margin:0 3px; list-style:none; border:1px
solid #999; border-bottom:none; height:24px; width:60px;
text-align:center; background:#FFF;}
a{font:bold 14px/24px “微软雅黑”, Verdana, Arial, Helvetica, sans-serif;
color:green; text-decoration:none;}
a:hover{color:red;}
#tab_content{width:398px; height:273px; border:1px solid #999;
font:bold 4em/273px “微软雅黑”, Verdana, Arial, Helvetica, sans-serif;
text-align:center; background:#FFF; overflow:hidden;}
#t_1,#t_2,#t_3{width:100%; height:273px;}
</style>
</head>
<body>
<div id=”box”>
<ul id=”tab_nav”>
<li><a href=”#t_1″>tab_1</a></li>
<li><a href=”#t_2″>tab_2</a></li>
<li><a href=”#t_3″>tab_3</a></li>
</ul>
<div id=”tab_content”>
<div id=”t_1″>tab_壹</div>
<div id=”t_2″>tab_贰</div>
<div id=”t_3″>tab_叁</div>
</div>
</div>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图