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. 闲聊——浅谈前端js模块化演变

    function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...

  2. C#启用管理员权限运行程序

    方法一:关闭程序重新请求打开 static class Program { [STAThread] static void Main() { Application.EnableVisualStyle ...

  3. 如何在EF中实现left join（左联接）查询

    在EF中,当在dbset使用join关联多表查询时,连接查询的表如果没有建立相应的外键关系时,EF生成的SQL语句是inner join(内联),对于inner join,有所了解的同学都知道,很多时 ...

  4. url中的特殊字符问题

    在 使用url进行参数传递时,经常会传递一些中文名(或含有特殊字符)的参数或URL地址,在后台处理时会发生转换错误.在有些传递页面使用GB2312, 而在接收页面使用UTF8,这样接收到的参数就可能会 ...

  5. Java IO 操作（一）

    (1)File 类的基础用法 // 1.创建 一个file 对象File file = new File("D:\\aaa");// 2.判断此 file 是否是一个文件夹file ...

  6. java 日期格式

  7. hack

    1.Firefox @-moz-document url-prefix() { .selector { property: value; } }上面是仅仅被Firefox浏览器识别的写法,具体如: @ ...

  8. 使EditText不要在页面打开时自动获取焦点（因为软键盘会自动弹出）

    当页面上有EditText时,第一个EditText会在页面打开时自动的获取焦点,这样带来的问题就是系统键盘会自动的弹出来. 解决方法比较简单只要为EditText的父控件设置一下就行了: andro ...

  9. Centos7 编译安装 Nginx PHP Mariadb Memcached 扩展 ZendOpcache扩展 (实测 笔记 Centos 7.3 + Mariadb 10.1.20 + Nginx 1.10.2 + PHP 7.1.0 + Laravel 5.3 )

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7-x86_64-Minimal-1611.iso 安装步骤: 1.准备 1.0 查看硬 ...

  10. 一鼓作气 博客--第五篇 note5

    一.迭代器 二.装饰器 三.生成器 1.生成列表的方式有几种 2.把列表每个数都加1 2.1 data =[1,2,3] for i in map(lambda x:x+1,data):print(i ...