H5+css3.0菜单实例

2019-09-08 郑州网站建设  

垂直菜单:

<!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>
河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1366.html转载请标明出处,谢谢合作!
标签:
  • !
  • Doctype
  • +
  • 菜单
  • H5
  • css3.0
  • 垂直