H5+css3.0菜单实例

垂直菜单：

  menu 
 *{
     margin: 0;
     padding: 0;
 }
 #menu{
     width: 200px;
     height: 
160px;
     /*background: blanchedalmond;
    */ margin: 50px auto;
 }
 #menu ul{
     
list-style: none;
 /*取消项目符号*/ }
 #menu ul li{
     width: 100%;
     height: 36px;
     
line-height: 36px;
     text-align: center;
     background: mediumorchid;
     
border-bottom: 2px solid aquamarine;
     border-left: 10px solid maroon;
     
border-right: 2px solid maroon;
 }
 #menu ul li a{
     text-decoration: none;
     
/*取消超级链接的下划线*/ display: block;
 }
 #menu ul li a:link{
     color: white;
 }
 
#menu ul li a:visited{
     color: white;
 }
 #menu ul li a:hover{
     background: 
green;
 }
  
 
 
首页
 
公司简介
 
特色产品
 
联系我们
 
 

水平菜单：

 
 menu  *{
     margin: 0;
     padding: 0;

 }
 #menu{
     width: 800px;
     height: 36px;
     background: blanchedalmond;
     
margin: 50px auto;
 }
 #menu ul{
     width: 100%;
     list-style: none;
 /*取消项目符号*/
 }
 #menu ul li{
     width: 100px;
     height: 36px;
     line-height: 36px;
     
text-align: center;
     float: left;
 }
 #menu ul li a{
     text-decoration: none;
    
 /*取消超级链接的下划线*/ display: block;
 }
 #menu ul li a:link{
     color: #ff2f1b;
 }
 
#menu ul li a:visited{
     color: #ff2d1a;
 }
 #menu ul li a:hover{
     
background: chartreuse;
 }
      
 
 
首页
 
公司简介
 
特色产品
 
联系我们
 
 

并列式列表：

 
 Title  *{
     margin: 0;
     padding: 
0;
 }
 #list01{
     width: 300px;
     height: 200px;
     /*border: 1px solid red;
    */ 
margin: 0 auto;
 }
 #list01 dt{
     width: 180px;
     height: 36px;
     line-height: 
36px;
     /*text-align: center;
    */ float: left;
     border-bottom: 1px dotted 
red;
     padding-left:20px;
     background: url("images/727.gif") no-repeat 0 
center;
 }
 #list01 dd{
     width: 100px;
     height: 36px;
     line-height: 36px;
     
text-align: center;
     float: left;
     border-bottom: 1px dotted red;
 }
     
 
 
 隐形的翅膀 张韶涵 
忘情水 刘德华 
月亮之上 凤凰传奇 
演员 薛之谦  

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！