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 工作原理的第十三章. 概述 正如你 ...
随机推荐
- windows下安装TensorFlow（CPU版）
建议先到anaconda官网下载最新windows版的anaconda3.6,然后按步骤进行安装.(这里我就不贴图了,自己下吧) 1.准备安装包 http://www.lfd.uci.edu/~goh ...
- my09_mysql指定时间点恢复之binlog start-position
场景描述 ********************************************* 在远程服务器做的全备并已经恢复,同时使用binlog server备份binlog 之后,删除了库 ...
- windows环境搭建禅道项目管理工具
zentao官网的几个网址 http://www.zentao.net/ http://www.zentao.net/article-view-79863.html 搭建环境需要下载两个文件 1) ...
- python—datetime time 模板学习
写在前面:本人在学习此内容是通过 https://www.cnblogs.com/pycode/p/date.html 文章学习! 时间模块——time python 中时间表示方法有:时间戳_:格式 ...
- dict 增删改查
# dict # 数据类型划分: 可变数据类型,不可变数据类型 # 不可变数据类型: 元组 bool int str set (又被称为可哈希) # 可变数据类型: list dict (又被称为不可 ...
- HBuilder的常用快捷键
Ctrl + d 删除整行内容 Ctrl + Shift +R 复制当前行到下一行 Ctrl + Shift +D 重新编辑 Ctrl + 方向键 当前行整行内容上移或下移 Alt + ↓ 跳转到下一 ...
- MVC execl 导入导出
MVC execl 导入导出 <input id="xls" name="xls" type="file" style="w ...
- [转]c#匿名类
首先让我们看一个例子, 假设我们并没有Person类, 并且我们关心的属性只有Name和Age. 下面的代码演示了我们如何在没有声明类型的情况下来构建一个对象的: 1: var tom = new { ...
- java web api接口调用
Web Services 被W3C进行了标准化定义. Web Services 发布到网上,可以公布到某个全局注册表,自动提供服务URL,服务描述.接口调用要求.参数说明以及返回值说明.比如中国气象局 ...
- LOJ#137. 最小瓶颈路 加强版(Kruskal重构树 rmq求LCA)
题意 三倍经验哇咔咔 #137. 最小瓶颈路 加强版 #6021. 「from CommonAnts」寻找 LCR #136. 最小瓶颈路 Sol 首先可以证明,两点之间边权最大值最小的路径一定是在最 ...