html和css实现一级菜单和二级菜单学习笔记
实现一级菜单:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>menu1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> body{ font-family: "宋体"; font-size: 12px; line-height: 1.5; } a{ color:#000; } a:HOVER{ color:#F00; } .menu{ width:100px; border:1px solid #CCC; /* border:1px solid red; */ background-color: silver; } .menu ul{ margin:0px; padding:0px; background-color: pink; } .menu li{ list-style-type: none; background-color: #eee; padding:0px 8px; height:26px; line-height: 26px; border-bottom:1px solid #CCC; } </style> </head> <body> <div class="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">网页版布局</a></li> <li><a href="#">div+css教程</a></li> <li><a href="#">div+css实例</a></li> <li><a href="#">经常使用代码</a></li> <li><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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>menu1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> var startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("menu");/* 得到id */ var allli = navRoot.getElementsByTagName("li");/*得到li全部的元素 */ for (var i=0; i<allli.length; i++) { var node = allli[i]; node.onmouseover=function() {/*注冊函数 */ this.className+=" current"; }; node.onmouseout=function() {/*注冊函数 */ this.className=this.className.replace(" current", ""); }; } } }; window.onload=startList;/* 载入完成,运行 */ </script> <style type="text/css"> body{ font-family: "宋体"; font-size: 15px;/* 字体的大小 */ line-height: 1.5;/* line-height 属性设置行间的距离(行高)。 */ } a{ color:#f0f;/*正常的a标签的字体元素 */ text-decoration: none;/* 取消下划线 */ } /*鼠标悬浮时,字体的颜色 */ a:HOVER{ color:#F00; } /* id为menu的菜单 */ #menu{ width:200px;/*设置宽度 */ /* border:1px solid #CCC; */ border:2px solid blue;/* 设置边框 */ /* background-color: silver; */ background-color: red; /*背景颜色为红色 */ border-bottom: none;/*下边框的宽度 */ } #menu ul{ margin:0px;/*ul的外边距 */ padding:0px;/*ul的内边距 */ width:120px;/* 块元素的宽度 */ background-color: pink;/*设置背景颜色 */ } #menu ul li{ list-style-type: none; background-color: #eee; /* background-color: red; */ width:90px; padding:0px 8px; height:26px; line-height: 26px; border-bottom:1px solid #CCC; /* border-bottom:1px solid red; */ position:relative; } #menu ul li ul{ position:absolute;/*绝对定位 */ left:100px;/* 向右移动100px */ top:0px;/* 向下移动0px */ display:none;/*默认不显示 */ width:100px;/*宽度 */ border:1px solid #CCC;/* 边框 */ border-bottom: none; } #menu ul li.current ul{ display:block;/*以块元素显示 */ } #menu ul li:hover ul{ display:block;/*以块元素显示 */ } </style> </head> <body> <div id="menu"> <ul> <li><a href="@#">首页</a></li> <li><a href="#">网页版布局</a> <ul> <li><a href="#">自适用宽度</a></li> <li><a href="#">固定宽度</a></li> </ul> </li> <li><a href="#">div+css教程</a> <ul> <li><a href="#">新手新手教程</a></li> <li><a href="#">视频教程</a></li> <li><a href="#">常见问题</a></li> </ul> </li> <li><a href="#">div+css实例</a></li> <li><a href="#">经常使用代码</a></li> <li><a href="#">站长杂谈</a></li> <li><a href="#">技术文档</a></li> <li><a href="#">资源下载</a></li> <li><a href="#">图片素材</a></li> </ul> </div> </body> </html>
显示效果例如以下:
代码里面都有凝视,就不做过多的解释了。
http://blog.csdn.net/j903829182/article/details/38735639