2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色
1.JavaScript+CSS+DIV实现下拉菜单
1.1 层标签<div>
基本语法：
<div id="层编号" style="position:absoult;left:29px;top:12px;
width:200px;henght:100px;background-color:#33CC99;
float:none;clear:none;z-index:1">
</div>
语法说明：
·position属性主要是来定义层的定位方式；
·left和top是用来定位层的位置，表示与其他对象的左部、顶部的相对位置。
·width和length是用来定义层的宽度和高度。
·float是层的浮动属性，用来设置层的浮动位置。
·clear是层的清除属性，表示是否允许在某个元素的周围有浮动元素，他和浮动
属性是一相对立的属性，浮动属性用来设置某个元素的浮动位置，而清除属性
则要去掉某个位置的浮动元素。
·z-index主要是设置区域的上下层关系，利用此属性设置可以让区域更多层次的效果，
相当一三维空间的z坐标，z-index坐标越大，区域在堆中的位置越高。
2.利用JavaScript+DIV+CSS实现下拉菜单
下拉菜单的原理就是再用javascript控制不同DIV的显示和隐藏，其中所有DIV都是用CSS
定位方法提前定义好位置和表现形式，下拉的效果只是当鼠标经过的时候触发一个事件。
设计：
（1）首先利用javascript设计两个鼠标事件函数
当鼠标移动到菜单选项时显示对应的DIV：function show(menu)
当鼠标移出时隐藏所有的DIV：function hide（）
（2）设计3个DIV，每个DIV对应一个菜单项及其对应的子菜单项，3个菜单项对应的DIV的id为别为menu1、menu2、menu3
（3）设计关键：3个DIV的位置的确定。
(4)实现关键代码如下：
<html> <head> <title>下拉菜单示例</title> <script language="javaScript"> //当鼠标移动到菜单选项的时候显示对应的DIV function show(menu){ document.getElementById(menu).style.visibility="visible"; } //当鼠标移出的时候隐藏所有的DIV function hide(){ document.getElementById("menu1").style.visibility="hidden"; document.getElementById("menu2").style.visibility="hidden";
document.getElementById("menu3").style.visibility="hidden"; } </script> </head> <body> <table> <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:12;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=260;top=38;width=120;
visibility=hidden">
<span>c++课件</span>
<span>java课件</span>
<span>c#课件</span>
</div>
<div id="menu3" onMOus;onMouseMove="show(menu3)" onMouseOut="hide()"
style="background:#9999FF position:absoulte;left=260;top=38;width=120;
visibility=hidden">
<span>c++教学大纲</span>
<span>java教学大纲</span>
<span>c#教学大纲</span>
</div> </body> </html>
2.4.2JavaScript+CSS+div实现表格变色
当鼠标移动到某一行时，这行的背景颜色发生了变化这样当前行就会比较突出。
<html> <head> <title>变色表格实例</title> <script language="javascript"> function changeColor(row){ document.getElementById(row).style.blackgroundColor='#CCCCFF'; } function resetColor(row){ document.getElementById(row).style.backgroundColor="; } </script> </head> <body> <table width="250" border="1" cellspaceing="1" cellpadding="1" align="center"> <tr><th>学校</th><th>专业</th><th>人数</th></tr> <tr align="center" id="row1" onMouseOver="changeColor('row1')" onMouseOut="resetColor('row1')"> <th>北大</th><th>法律</th><th>2000</th> </tr> <tr align="center" id="row2" onMouseOver="changeColor('row2')" onMouseOver="resetColor('row2')"> <th>清华<th>计算机</th><th>5000</th> </tr> <tr align="center" id="row3" onMouseOver="changeColor('row3')" onMouseOver="resetColor('row3')"> <th>人大</th><th>经济</th><th>6000</th> </tr> </table> </body> </html>
Html是组织展示内容的标记语言，JavaScript是客户端的脚本语言，CSS是美化页面的样式表
document.getElementById("menu1").style.visibility="hidden";
