定位

通过对元素设置position属性，可以让元素出现在相应设置的位置。定位有四种类型：

静态定位(static)：HTML元素的默认值，即没有定位，静态定位的元素不会受到top, bottom, left, right影响。
固定定位(fixed)：元素的位置相对于浏览器窗口是固定位置(在不同的层次进行布局)，会受到top, bottom, left, right影响。
相对定位(relative)：相对定位元素的定位是相对其原来位置的偏移量，会受到top, bottom, left, right影响。
绝对定位(absolute)：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对与body元素，会受到top, bottom, left, right影响。

	脱离文档流	block元素	覆盖下层文本	层次是否提高
relatived	是	否	是	否
absolute	是	是	是	是
fixed	是	是	是	是

事件

网页中的每个元素对象产生某些事件。元素对象添加事件监听器，当相应事件发生时，相应的javascript函数进行相应

事件举例：

鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键

监听器函数：

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

事件冒泡还是事件捕获？

事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？
在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。
在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

导航下拉菜单

HTML源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width = device-width,initial-scale = 1.0" />
    <title>navs</title>
    <link href="nav.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="listener.js"></script>
  </head>
  <body>
    <ul id="nav">
      <li><a href="#">首页</a></li>
      <li><a href="#">视频教程</a></li>  <!-- 导航菜单-->
      <li><a href="#">入门教程</a></li>
      <li><a href="#">资源下载</a></li>
      <li>
        <a href="#">社区问答</a>
        <ul>
          <li><a href="">PHP工具</a></li>    <!-- 二级菜单-->
          <li><a href="">手册</a></li>
          <li><a href="">JS特效</a></li>
          <li><a href="">网站源码</a></li>
          <li><a href="">在线工具</a></li>
          <li><a href="">学习课件</a></li>
          <li><a href="">后端模板</a></li>
          <li><a href="">类库下载</a></li>
        </ul>
      </li>
      <li>
        <a href="#">技术文章</a>
        <ul>
          <li><a href="">头条</a></li>
          <li><a href="">博客</a></li>
          <li><a href="">PHP教程</a></li>
          <li><a href="">PHP框架</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

CSS源码

样式设置思路：

对第一个大无序列表的li元素进行浮动，此时第一个ul的height和width变为0，所以通过positon：absolute提高层次，再次被浮动的li撑开height和width
设置第一级无序列表的position:relative，作为第二级ul的定位参照对象。同时因第二级ul开始了position:absolute,故而也会被其子li撑起height
将两个二级ul设置为默认不可见，通过js处理可见性
```css
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
#nav >> li {
margin-left: 20px;

position: relative;
}
a {
color: white;
text-decoration: none;
}
#nav {
background-color: black;
/ height: 50px; /
line-height: 50px;
font-size: 5px;
position: absolute;
}
#nav > li > ul {
position: absolute;
top: 50px;
left: 10px;
background-color: rgb(241, 225, 225);
font-size: 10px;
width: 130px;
/ height: 200px; /
}
#nav > li > ul > li {
margin-left: 5px;
}
li {
float: left;
}
#nav> li > ul > li > a {
display: block;
width: 60px;
height: 30px;
line-height: 30px;
}
#nav > li > a:hover {
color: red;
}

#nav > li > ul > li > a:hover {
color: saddlebrown;
}
#nav > li > ul {
display: none;
}

## javascript源码
```javascript
window.onload = function () {
  //通过事件冒泡，添加事件监听，当A标签或li标签事件被触发，执行li事件响应
  const navs = document.querySelectorAll("#nav > li"); //获取#nav下的子li元素
  navs.forEach(function (nav) {
    nav.addEventListener("mouseover", showSubMenu); //为每个li绑定鼠标移动到a标签监听程序
    nav.addEventListener("mouseout", closeSubMenu); //为每个li绑定鼠标移开到a标签监听程序
  });
  //移动到标签相应函数
  function showSubMenu(ee) {
    console.log(ee.target);
    console.log(this);
    if (ee.target.nodeName == "A" && ee.target.nextElementSibling != null) {
      //判断触发事件的对象是否为A标签的兄弟标签ul
      ee.target.nextElementSibling.style.display = "block";
    }
  }
  //移开标签相应函数
  function closeSubMenu(ee) {
    if (ee.target.nodeName == "A" && ee.target.nextElementSibling != null) {
      ee.target.nextElementSibling.style.display = "none";
    }
  }
};

效果

批改老师：

WJ

批改状态：合格

老师批语：写的不错，很认真，继续加油！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

js箭头函数

2020-06-23 11:07:16