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;

　　　　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;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";