H5+css3.0菜单实例

 

垂直菜单:

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8"> <title>menu</title> 
<style> *{ 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; } </style></head><body> <div id="menu"> 
<ul> <li><a href="#">首页</a></li> 
<li><a href="#">公司简介</a></li> <li><a 
href="#">特色产品</a></li> <li style="border-bottom: 
0"><a href="#">联系我们</a></li> </ul> 
</div></body></html>

水平菜单:

<!DOCTYPE
 html><html lang="en"><head> <meta charset="UTF-8">
 <title>menu</title> <style> *{ 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; } </style></head><body> 
<div id="menu"> <ul> <li style="margin-left: 
200px;"><a href="#">首页</a></li> <li><a 
href="#">公司简介</a></li> <li><a 
href="#">特色产品</a></li> <li><a 
href="#">联系我们</a></li> </ul> 
</div></body></html>

并列式列表:

<!DOCTYPE
 html><html lang="en"><head> <meta charset="UTF-8">
 <title>Title</title> <style> *{ 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; } 
</style></head><body> <div id="list01"> 
<dl> <dt>隐形的翅膀</dt> <dd>张韶涵</dd> 
<dt>忘情水</dt> <dd>刘德华</dd> 
<dt>月亮之上</dt> <dd>凤凰传奇</dd> 
<dt>演员</dt> <dd>薛之谦</dd> </dl> 
</div></body></html>