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. APPCAN开发笔记：html页面之间的参数传递：使用js获取url中的参数，以及在APPCAN中不能使用的解决方法

    用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...

  2. CSS3属性box-sizing

    1.box-sizing属性是CSS3的属性,有3个值:border-box.content-box.inherit. 2.默认是content-box,就是我们知道的width.padding.bo ...

  3. 一个神奇的POS -扫描 现场销售 开单打印票据 安卓物联网POS机 手持开单终端机 省时省力 高效准确！！

    5寸高清彩屏,高端大气上档次,小巧轻便,独特的包胶防护,坚固耐用,外形精细,美观!与软件灵活对接,解决企业手工盘点,手工输单,库存管理等困难,提高准确率,提高工作效率!! 应用领域:适用于仓库.超市. ...

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

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

  5. [资料分享]2016 黑马 Java 19期视频+Hadoop大数据实战视频

    下载链接: 链接:http://pan.baidu.com/s/1bToXK6 密码:7k43 解压密码: www.lthack.com 或者 2cifang.com 或者 2cifang.com_2 ...

  6. bzoj2342还是马拉车

    就好比第一次写主席树的时候写了30行,第二次写了5行 这次马拉车只剩下 ,id=,mx=;i<=n;i++) { -i],mx-i):;a[i-p[i]]==a[i+p[i]+];p[i]++) ...

  7. 【读书笔记】《编程珠玑》第一章之位向量&位图

    此书的叙述模式是借由一个具体问题来引出的一系列算法,数据结构等等方面的技巧性策略.共分三篇,基础,性能,应用.每篇涵盖数章,章内案例都非常切实棘手,解说也生动有趣. 自个呢也是头一次接触编程技巧类的书 ...

  8. 【UISegmentedControl】-  分段控件

    一.初始化 二.常见的属性 1.segmentedControlStyle属性:设置基本的样式 2.momentary属性:设置在点击后是否恢复原样 . 3.numberOfSegments属性:只读 ...

  9. BZOJ4262: Sum

    Description   Input 第一行一个数 t,表示询问组数. 第一行一个数 t,表示询问组数. 接下来 t 行,每行四个数 l_1, r_1, l_2, r_2.   Output 一共 ...

  10. iOS 中 ARC 项目 兼容 MRC

    iOS 项目中MRC 和 ARC 项目的代码兼容问题: 1.ARC 项目中导入 MRC 第三方类的时候要在此类上添加 -objc-arc. 2.MRC 项目中导入 ARC 类的时候要在次类上添加 -f ...