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";
2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色的更多相关文章
- 基于FPGA的光口通信开发案例｜基于Kintex-7 FPGA SFP+光口的10G UDP网络通信开发案例
前言 自著名华人物理学家高锟先生提出"光传输理论",实用化的光纤传输产品始于1976年,经历了PDH→SDH→DWDM→ASON→MSTP的发展历程.本世纪初期,ASON/OADM ...
- JavaScript+CSS+DIV实现表格变色示例
<!DOCTYPE html> <html> <head> <title>colortable.html</title> <scrip ...
- JavaScript设计模式与开发实践——JavaScript的多态
“多态”一词源于希腊文polymorphism,拆开来看是poly(复数)+ morph(形态)+ ism,从字面上我们可以理解为复数形态. 多态的实际含义是:同一操作作用于不同的对象上面,可以产生不 ...
- javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库
预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...
- inuit.css – 基于 Sass 的强大，可扩展的 CSS 框架
inuit.css 是一个强大的,可扩展的 CSS 框架,另外还是基于 Sass,面向对象的框架.inuit.css 是建立在 BEM 风格的命名约定,非常适合于想要专注于创意而不是代码的设计师以及喜 ...
- 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
2017春 前端自动化(二) 页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言: 此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...
- Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么（转）
Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...
- Javaweb学习笔记——（二）——————CSS概述，进入JavaScript
day02day01内容回顾 1.html操作思想 **使用标签把要操作的数据包起来,通过修改标签的属性值来是实现标签内数据样式的变化 ***<font size="5"&g ...
- JavaScript 工作原理之十三－CSS 和 JS 动画底层原理及如何优化其性能
原文请查阅这里,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十三章. 概述 正如你 ...
随机推荐
- B树与B+
简单剖析B树(B-Tree)与B+树https://blog.csdn.net/z_ryan/article/details/79685072 B树和B+树的插入.删除图文详解https://www. ...
- scanf()函数的注意事项
/* 2 time:2018年5月23日18:57:52 3 author:Howie Tang 4 title:scanf()函数的总结 5 */ #include <stdio.h> ...
- linux-centos-pgsql-Ident authentication failed for user “postgres”错误出现解决方法
首先,要找到pg_hba.conf\ -->cd /var/lib/pgsql/data -->vi pg_hba.conf 然后,将里面的配置文件修改如下: # TYPE DATABAS ...
- 电量分析工具 Battery Historian 的配置及使用
1.Building from source code(通过各种配置后从源码构建) 官方流程看似很麻烦,但一上手,很快就搞定,让我情何以堪. ps:以下均是参考官方及网友做的 copy https:/ ...
- ExtJS 开发总结
1. ExtJS的定位是RIA,和Prototype.jQuery等类库的定位不同.使用ExtJS做开发,就是意味着以客户端开发为主,不然就不叫RIA框架了,而Prototype.jQuery等只是辅 ...
- [转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法 方法1:使用ajaxStart方法定义一个全局的“加 ...
- 动态资源不缓存 filter
package com.itheima.web.filter; import java.io.IOException; import javax.servlet.Filter; import java ...
- div拖动实现及优化
工作中的一个项目ui界面比较传统(chou),就想着把前端重构一下.内容之一是把导航栏从上方固定高度改为了右侧伸缩的边栏,好处是边栏可伸缩,占用面积小.不完美的地方是有时候会遮挡页面上最右边的按钮,作 ...
- java 通过反射获取和设置对象属性值
public static Object parseDate(Object object){ SimpleDateFormat sdf = new SimpleDateFormat("yyy ...
- 拿到返回值，Callable示例