onclick：单击时触发事件
onmouseover：鼠标进入时触发事件
onmouseout：鼠标离开时触发事件
 
事件三要素：最基础的内容
事件源：有监听的HTML 标签，能响应事件的HTML 标签，就是事件源。
事件名：用户的特定行为，比如onclick
事件的响应：就是一个个function
 
通过ID来获得元素：document.getElementById("XXX")；
通过Class来获得元素：document.getElementByClassName("XXX")。
 
导航菜单：对选项添加鼠标进出事件。
display为none的元素隐藏且会让出自己的位置。
visibility为hidden的元素隐藏但是不让出自己的位置.
 
关于定位：用position，口诀：”子绝父相“.
 
JS编程必须要先布局，布局稳定了在做下一步。
 
水平菜单
1） 脱标，留在原地。position:absolute ,不写top 值，可以写left 值来调整位置。
2） 空档一定是父盒子的padding，而不能是子盒子的margin
3） 监听一定是在li 身上，而不能是a 身上
4） 要学会用class“避讳样式”——我们的后代选择器有点不好用，所以就要给不同的li 加上不同的class
区分即可，通过class 来添加样式
5） 不要过分的追求所谓优雅的代码

JS实战 · 零碎笔记的更多相关文章

  1. Vue.js实战学习笔记（中）

    1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...

  2. Linux实战教学笔记26:http协议原理

    目录 第二十六节 http协议原理 第1章 Web服务基础 1.1 http服务重要基础 1.2 HTTP协议 1.3 HTTP资源 1.4 网站流量度量术语 1.5 www服务软件介绍 1.6 本章 ...

  3. Linux实战教学笔记08:Linux 文件的属性（上半部分）

    第八节 Linux 文件的属性(上半部分) 标签(空格分隔):Linux实战教学笔记 第1章 Linux中的文件 1.1 文件属性概述(ls -lhi) linux里一切皆文件 Linux系统中的文件 ...

  4. Linux实战教学笔记07:Linux系统目录结构介绍

    第七节 Linux系统目录结构介绍 标签(空格分隔):Linux实战教学笔记 第1章 前言 windows目录结构 C:\windows D:\Program Files E:\你懂的\精品 F:\你 ...

  5. Linux实战教学笔记06:Linux系统基础优化

    第六节 Linux系统基础优化 标签(空格分隔):Linux实战教学笔记-陈思齐 第1章 基础环境 第2章 使用网易163镜像做yum源 默认国外的yum源速度很慢,所以换成国内的. 第一步:先备份 ...

  6. Linux实战教学笔记05:远程SSH连接服务与基本排错(新手扫盲篇)

    第五节 远程SSH连接服务与基本排错 标签(空格分隔):Linux实战教学笔记-陈思齐 第1章 远程连接LInux系统管理 1.1 为什么要远程连接Linux系统 在实际的工作场景中,虚拟机界面或物理 ...

  7. Linux实战教学笔记04:Linux命令基础

    第四节:Linux命令基础 标签(空格分隔):Linux实战教学笔记 第1章 认识操作环境 root:当前登陆的用户名 @分隔符 chensiqi:主机名 -:当前路径位置 用户的提示符 1.1 Li ...

  8. Linux实战教学笔记03:操作系统发展历程及系统版本选择

    标签(空格分隔): Linux实战教学笔记-陈思齐 第1章 Linux简介 1.1 什么是操作系统? 简单讲:操作系统就是一个人与计算机硬件的中介. 操作系统,英文名称Operating System ...

  9. Linux实战教学笔记02:计算机系统硬件核心知识

    标签(空格分隔):Linux实战教学笔记-陈思齐 第1章 互联网企业常见服务器介绍 1.1 互联网公司服务器品牌 - DELL(大多数公司,常用) - HP - IBM(百度在用) 浪潮 联想 航天联 ...

随机推荐

  1. 控制台查看原生sql

    情况:当tomcat运行时,项目运行过程中,控制台没有打印出原生sql语句: 解决办法如下: 在 META-INF  文件夹下,查找 persistence.xml 这个文件(这里注意可能一个项目不止 ...

  2. 学习微信小程序之css3display

    一display diaplay改变标签的模式,行内装块级(block),块级转行内(inline) 通过设置display为none,可以 让整个标签在页内移除掉 设置visibility为hidd ...

  3. 关于利用bat文件调用exe批量处理文件下的文件的问题

    for %%i in (E:\radar_20120721\sjz_sa\*.bin) do start/wait radas.exe -i=%%i -o=E:\longjiang\out 找到 文件 ...

  4. DelphiXE10.1项目中增加预编译的方法

    操作: 菜单选择Proceject->Options->Delphi Compilerz在Conditional Defines(第一行)中添加预编译标识.例:VCL代码:uses{$IF ...

  5. wpf 切换资源字典的2中方式

    var _1200RDUri = new Uri(String.Format(@"/aa;Component/Themes/1200Theme.xaml"), UriKind.Re ...

  6. css3实现圆形逐渐减少动画

    写这个动画刚开始完全没有思路,后来参考网上的资料发现可以用半圆实现,具体原理如下: 1.,一个div作为背景,三个div做出三个半圆出来,一个用于旋转,一个靠左(用于与背景吻合),一个靠右(用于与背景 ...

  7. Windows Commands and API

    Shortcuts ... Symbolic Links https://en.wikipedia.org/wiki/NTFS_symbolic_link Hard Links https://en. ...

  8. 在VS2012下静态链接MFC的问题

    1>------ 已启动生成: 项目: MFCApplication1, 配置: Debug Win32 ------1>uafxcwd.lib(afxctrlcontainer2.obj ...

  9. jQuery中设置form表单中action的值的方法

    下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...

  10. db2定界符

    在DB2数据库中,在导出DEL文件时,默认的字符分隔符是".字段分隔符是, (逗号).有一个需求是要为Oracle数据库提供数据,因此就想使用"|"作为数据的字段分隔符. ...