您的位置：首页 > Web前端 > CSS

html和css实现一级菜单和二级菜单学习笔记

2016-02-29 12:01 881 查看
实现一级菜单：

<!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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航