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 工作原理的第十三章. 概述 正如你 ...
随机推荐
- Python3 PIL Image 操作文件后导致占用问题
需求:按图片分辨率范围分类图片(每个商品有N张图片在一个目录内). 实现:用PIL Image打开图片并读取宽度和高度.然后按不同分辨率存档到不同目录. 问题:从原有目录移动到目标目录时出现 “Per ...
- maya2018安装失败如何卸载重装
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- java语言编程实现两个时间相差多少天、多少小时、多少分、多少秒
不多说,直接上干货! DateDistance.java package zhouls.bigdata.DataFeatureSelection.test; import java.text.Date ...
- Nginx主主负载均衡架构
在和一些朋友交流Nginx+Keepalived技术时,我虽然已成功多次实Nginx+Keepaived项目方案,但这些都是用的单主Nginx在工作,从Nginx长期只是处于备份状态,所以我们想将二台 ...
- PHP的htmlspecialchars、strip_tags、addslashes解释
第一个函数:strip_tags,去掉 HTML 及 PHP 的标记 注意:本函数可去掉字串中包含的任何 HTML 及 PHP 的标记字串.若是字串的 HTML 及 PHP 标签原来就有错,例如少了大 ...
- springboot 整合redisson
整合代码已经过测试 1.pom <!-- redisson --> <dependency> <groupId>org.redisson</groupId&g ...
- [转]Asp.net Core中使用Session
本文转自:http://www.cnblogs.com/sword-successful/p/6243841.html 前言 2017年就这么悄无声息的开始了,2017年对我来说又是特别重要的一年. ...
- jenkins构建&发布git托管的VS工程
顺便做个笔记,以防以后再踩坑:笔者用的是jenkins-1.620和git-2.7.2-64-bit.exe,操作系统是win10(本机) jenkins安装完成之后 如果想要配合git完成拉取代码. ...
- 创建Graphics对象与Pen对象
Graphics对象表示GDI+绘图表面,是用于创建图形图像的对象,所以要通过GDI+创建绘图,必须先创建Graphics对象,然后才可以使用GDI+的笔.刷等结合颜色.字体等对象进行绘制线条形状.填 ...
- java并发编程，通过Future取消任务
功能:通过Executor框架提供的线程池,提交任务,使用Future取消任务 任务:增长序列号,从0开始隔1s增长1 通过Future指定时间取消任务 IncrementSequence.java ...