49-玻璃效果菜单

最新推荐文章于 2024-07-09 14:49:28 发布

会编程的阿强

最新推荐文章于 2024-07-09 14:49:28 发布

阅读量996

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/12715233

版权

HTML/CSS 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

效果演示：

实现代码：

<!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>

    	<style>
    	body{
			margin:0;
			margin-top:20px;
		}
		ul#menu {
  		  font-family:Arial;
		  font-size:14px;
		  background:url(under.gif);
  		  padding:0 0 0 8px; 
   		  margin:0; 
          list-style:none; 
          height:35px; 
          }
		  
	    #menu li {
		  float:left;
		  }

	    #menu li a{
		  display:block;
		  float:left; 
  		  line-height:35px; 
		  color:#ddd;
		  text-decoration:none;
		  padding:0 0 0 14px;
		  }

		#menu li a:hover{
		  color:#fff; 
   		  background: url(hover.gif);
   		  }
		  
		 #menu li a strong{
		  display:block;
		  padding:0 14px 0 0;
   		  }
		  
	  	#menu li a:hover strong{
		  color:#fff; 
   		  background: url(hover.gif) no-repeat right top;
   		  }

   		</style>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>玻璃效果菜单</title></head>

<body>
	<ul  id="menu">
	   <li><a href="#"><strong> Home </strong></a> </li>
       <li><a href="#"><strong> Flash </strong></a></li>
       <li><a href="#"><strong> Dreamweaver </strong></a></li>
       <li><a href="#"><strong> CSS </strong></a></li>
       <li><a href="#"><strong> Photoshop </strong></a></li>
	</ul>
</body>
</html>