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 工作原理的第十三章. 概述 正如你 ...
随机推荐
- linux 6 安装 使用 XtraBackup
帮助文档:https://www.cnblogs.com/imweihao/p/7290026.html ---Yum安装 官网地址:https://www.percona.com/doc/perco ...
- PlayMaker Get Parent 拿到父物体
这里是拿到自己的父物体,然后存储到Parent这个GameObject变量里. 然后在Parent那个位置生成一个Coin,也就是在父物体那生成一个Coin.
- winscp介绍与使用
winscp介绍 WinSCP 是一个 Windows 环境下使用的 SSH 的开源图形化 SFTP 客户端.同时支持 SCP 协议.它的主要功能是在本地与远程计算机间安全地复制文件,并且可以直接编辑 ...
- selinux下修改sshd端口号
21 如果已开selinux,修改sshd配置文件 # vim /etc/ssh/sshd_config中的端口号后 重启SSH服务 # systemctl restart sshd.servic ...
- Emacs学习笔记2
emacs的启动初始化 需要有一个~/.emacs文件, 这个和vim一样 emacs中的查找与替换 递增查找 C-s, 在minibuffer中输入即可, 在一次C-s会跳转到下一个 两次C-g取消 ...
- jenkins构建&发布git托管的VS工程
顺便做个笔记,以防以后再踩坑:笔者用的是jenkins-1.620和git-2.7.2-64-bit.exe,操作系统是win10(本机) jenkins安装完成之后 如果想要配合git完成拉取代码. ...
- Xtrareport 交叉报表
什么是交叉报表呢? 官方回答:交叉表报表是以交叉表形式呈现信息的报表. 交叉表 (或透视表) 类似于简单的普通数据绑定表格,但是改为在单个表格中呈现多维的分层级的信息,并含有每行和每列的自动排序.计数 ...
- webpack中package.json中的Script
初始化项目 cnpm init -y ,会自动生成一个package.json文件:主要是显示项目的名称.版本.作者.协议等信息 在package.json中scripts中配置:(运行简化) 开发模 ...
- 内存分配详解 malloc, new, HeapAlloc, VirtualAlloc，GlobalAlloc
很多地方都会使用内存,内存使用过程中操作不当就容易崩溃,无法运行程序,上网Google学习一下,了解整理下他们之间的区别以及使用 ,获益匪浅 0x01 各自的定义和理解 (1)先看GlobalAllo ...
- 卸载jrebel
Setting-Plugins-搜索Jrebel-右击选择Uninstall-apply 确认重启idea即可