H5+css3.0菜单实例
2019年11月30日
作者:佚名
垂直菜单:
<!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>