1.新建05.html，输入代码模板
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>menu_filter</title>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
2.在body中添加div标签，div中input是输入框，type="text"文本类型，type="password"密码类型
<div>
<label class="txt">用户</label><input type="text" name="user"><br>
<label class="txt">密码</label><input type="password" name="pass"><br>
<label class="btn">重置</label><label class="btn">登录</label><br>
<span id="result"></span>
</div>
3.添加css样式， .txt {...}文本样式，.btn {...}按钮样式
div {
width: 300px;
margin: 0 auto;
}
label,
input {
display: inline-block;
width: auto;
line-height: 20px;
padding: 5px 10px;
margin: 10px 5px;
}
.txt {
width: 50px;
text-align: right;
}
.btn {
width: 110px;
text-align: center;
border: solid 1px #666;
background: linear-gradient(#555, #333);
color: #eee;
border-radius: 4px;
user-select: none;
cursor: pointer;
}
4.编写交互脚本，定义用户的文本框user，密码的密码框pass，重置按钮reset，登录按钮login，显示结果result。
var user = document.getElementsByName('user')[0]//通过name获取元素
var pass = document.getElementsByName('pass')[0]
var reset = document.getElementsByClassName('btn')[0]//通过class获取元素
var login = document.getElementsByClassName('btn')[1]
var result = document.getElementById('result')//通过id获取元素
5.添加reset按钮的鼠标点击事件，点击后清空user、pass、result的内容。
reset.onclick = function () {
user.value = ''
pass.value = ''
result.innerHTML = ''
}
6.添加login登录按钮的鼠标点击事件，点击后结果显示在result中。
login.onclick = function () {
result.innerHTML = '你的输入信息<br>用户：' + user.value + '<br>密码：' + pass.value
}
7.添加按钮样式.btn {...}的伪类，:hover是鼠标移动到上方，:active是鼠标左键按下
.btn:hover {
background: linear-gradient(#5c5, #3c3);
}
.btn:active {
background: linear-gradient(#393, #393);
}
最终效果
------------完--------------
