1.层标签<div> :
<div>(division)是块级元素,可以包含段落,标题,表格,乃至诸如章节,摘要和备注等。由于是块级元素,在段落开始,结束出会插入一个换行。
基本语法:
<div id="层编号" style="position:absolute;left:29px;yop:12px;width:200px;height:100px;background-cloor:#33CC99;float:none;clear:none;z-index:1">
语法说明:
1.position 属性主要是定义层的定义方式。
2.left和top 是用来定义层的位置,表示与其他对象的左部,顶部的相对位置。
3.width和height 用来定义层的宽度和高度
4.float 是层的浮动属性,用来设置层的浮动位置
5.clear 是层的清除属性,表示是否允许在某个元素的周围有浮动元素,它和浮动属性是一对相对立的属性,浮动属性用来设置某 个 元素的浮动位置,而清除属性则要去掉某个位置的浮动元素。
6.z-index 主要是设置区域的上下层关系,利用此属性设置可以让区域更多层次的效果,相当于三维空间的z坐标,其值越大,区域在 堆栈中的位置越高
分析:网页下拉菜单的设计实际上就是菜单项的显示与隐藏,当鼠标移到某菜单时其下的菜单项就显示,当鼠标离开菜单及其子菜单项,其子菜单项就隐藏,需要使用JavaScript设计鼠标事件函数。使用DIV标记,确定每个菜单的位置。
设计:(鼠标事件函数)
1.当鼠标移动到菜单选项时显示对应的DIV:function show(menu)。
2.当鼠标移出时隐藏所有的DIV:function hide()。
3.设计3个DIV,每个DIV对应一个菜单项及其对应的子菜单项,3个菜单项对应的DIV的id分别为menu1,menu2,menu3。
代码:
jscssdiv.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>下拉菜单示例</title>
<script language="javaScript">
function show(menu) //当鼠标移动到菜单选项时显示对用的DIV
{document.getElementById(menu).style.visibility="visible";}
function hide() //当鼠标离开菜单选项时隐藏对应的DIV
{
document.getElementById("menu1").style.visibility="hidden";
document.getElementById("menu2").style.visibility="hidden";
document.getElementById("menu3").style.visibility="hidden";
}
</script>
<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">-->
</head>
<body>
<table align="center">
<tr bgcolor="#9999FF" align="center">
<td width="120" onMouseMove="show('menu1')" onMouseOut="hide()">系列课程</td>
<td width="120" onMouseMove="show('menu2')" onMouseOut="hide()">教学课件</td>
<td width="120" onMouseMove="show('menu3')" onMouseOut="hide()">课程大纲</td>
</tr>
</table>
<div id="menu1" onMouseMove="show('menu1')" onMouseOut="hide()"
style="background:#9999FF;position:absolute;left:220;top:38;width:120;visibility:hidden">
<span>c++程序设计</span><br>
<span>java程序设计</span><br>
<span>c#程序设计</span><br>
</div>
<div id="menu2" onMouseMove="show('menu2')" onMouseOut="hide()"
style="background:#9999FF;position:absolute;left:345;top:38;width:120;visibility:hidden">
<span>c++课件</span><br>
<span>java课件</span><br>
<span>c#课件</span><br>
</div>
<div id="menu3" onMouseMove="show('menu3')" onMouseOut="hide()"
style="background:#9999FF;position:absolute;left:470;top:38;width:120;visibility:hidden">
<span>c++教学大纲</span><br>
<span>java教学大纲</span><br>
<span>c#教学大纲</span><br>
</div>
</body>
</html>