导航下拉菜单的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>导航下拉菜单</title>
<style>
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
a{
color:red;
text-decoration:none;
}
#nav{
background:black;
height:50px;
line-height:50px;
}
li{
list-style:none;
margin:0px 10px;
float:left;
}
#nav>li>a:hover{
color:white;
}
#nav>li{
position:relative;
}
#nav>li>ul{
position:absolute;
top:50px;
width:180px;
border:1px solid #aaa;
border-top:none;
}
#nav>li>url>li a{
display:line-block;
height:50px;
color:#444;
}
ul.sub li:hover{
background:#eee;
}
#nav>li>ul{
display:none;
}
</style>
</head>
<body>
<ul id="nav">
<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="">学习工具</a></li>
<li><a href="">网站源码</a></li>
</ul>
</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="">学习工具</a></li>
<li><a href="">网站源码</a></li>
</ul>
</li>
</ul>
</body>
<script>
const navs=document.querySelectorAll(“#nav>li”);
navs.forEach(function(nav){
nav.addEventListener(“mouseover”,showSubMenu);
nav.addEventListener(“mouseout”,closeSubMenu);
});
function showSubMenu(ev){
if(ev.target.nextElementSibling !== null){
ev.target.nextElementSibling.style.display=”block”;
}}
function closeSubMenu(ev){
if(ev.target.nodeName ==”A” && ev.target.nextElementSibling !== null){
ev.target.nextElementSibling.style.display=”none”;
}}
</script>
</html>
对定位的理解
- 定位说的是元素在页面中的位置，其位置可用相对定位或绝对定位的方法进行偏移，元素默认在页面中以文档流的形式进行排列，通俗的理解就是源码中的书写位置。
- 相对定位：position:relative;元素相对于它在页面中的默认位置发生偏移。
- 绝对定位：positiong:absolute;元素相对于它的定位父级的位置发生偏移，如没有定位父级，就相对于body的位置发生偏移。绝对定位的上一级必须有定位设置，才会相对于它发生偏移。
对事件的理解
- 事件，就是发生的事情，发生的动作等，代码中的事件有点击、鼠标移入移出等。
- 时间的添加方式有两种，在元素中用属性的方式添加，或者在js代码中用对象属性的方式添加。
- 元素的同名事件不能重复，会相互覆盖，只有最后一次添加的事件有效。
- 用事件监听器可以为一个元素添加多个同名事件。并能够定义触发阶段（比如事件冒泡），产生什么动作。
- 用事件监听器为元素添加事件会有事件冒泡、和事件属性两种方式。在子级元素触发一个事件时，其父级也会产生相同的事件。事件冒泡，由内向外（由子级向父级）。事件捕获，由外向内（由父级向子级（到事件的触发者））。由事件冒泡的特性，我们可以用事件代理的形式来为子级元素添加事件，简化了代码的书写。所谓事件代理，就是用父级元素来代理子级元素甚至更下一级子级元素的同名事件。