写JS需要注意的：
一次定义，处处使用；一次修改，处处生效。
解决：凡是重复编写的代码块，都要封装为一个方法。
实现一个元素移出视线：
1.display:none;不占文档流
2.opacity:0;占文档流
3.visibility:hidden;占文档流
4.改width height，改为0，可以实现导航慢慢打开
5.定位，改left或者top值。
6.使用白色DIV盖住，然后渐变。
7.margin负值
写JS的步骤：
1.先写布局
2.实现原理
3.了解JS语法
JS事件 ：鼠标事件、键盘事件、系统事件、表单事件、
- 事件的种类
1、一般事件
2、页面相关事件
3、表单相关事件
4、滚动字幕事件
5、编辑事件
6、数据绑定事件
7、外部事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS基础</title>
<style>
ul{
padding:0;
margin:0;
}
li{
padding:0;
margin:0;
list-style: none;
}
.weibo{
border:1px solid gray;
80px;
height:30px;
text-align: center;
position: relative;
}
.weibo a{
line-height: 30px;
text-align: center;
text-decoration: none;
}
.weibo>a{
display: block;
/*border:1px solid red;*/
80px;
height:30px;
background: gainsboro;
}
ul ul{
border:1px solid red;
position: absolute;
80px;
left: -1px;
display:none;
}
</style>
</head>
<body>
<ul>
<li class="weibo" id="lis">
<a href="#" id="link" >微博</a>
<ul id="ul1">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var weibo=document.getElementById("lis");
var link1=document.getElementById("link");
var ul1=document.getElementById("ul1");
weibo.onmouseover=function () {
ul1.style.display="block";
link1.style.background="yellow";
};
weibo.onmouseout=function () {
ul1.style.display="none";
link1.style.background="gainsboro";
};
</script>
</body>
</html>
其中JS部分的代码，也可以放在head标签中，但是需要写成这样子：
<script type="text/javascript">
window.onload=function () {
var weibo=document.getElementById("lis");
var link1=document.getElementById("link");
var ul1=document.getElementById("ul1");
weibo.onmouseover=function show() {
ul1.style.display="block";
link1.style.background="yellow";
};
weibo.onmouseout=function hide() {
ul1.style.display="none";
link1.style.background="gainsboro";
};
}
</script>
有名字的函数可以增加代码重用，减少多余的代码。