学习目标：
通过对项目整体的认识设计出符合使用的前段登录界面
学习内容：
1、 搭建 JavaScript基本语法
2、 掌握表单
3、 通过需求分析设计界面
4、 实现js对输入验证
学习产出：
尝试从能实现用户登录，用户注册，忘记密码三方面进行登录界面设计。
附代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录实例</title>
<style>
* { margin:0; padding:0;}
body { font-family:'微软雅黑'; background:#eee;}
#userlogin { width:300px; background:white; margin:30px; padding:25px; margin:0 auto; }
#userlogin h3 { font-size:16px; line-height:2em; margin-bottom:25px;}
#userlogin .input-text { font-family:'微软雅黑'; border:1px black solid; padding-left:10px; height:40px; width:288px; font-size:16px; margin-bottom:20px;}
#userlogin .input-btn { display:block; width:300px; height:40px; border:none;
background: #9a0002; color:white; font-size:16px; font-weight:bold; letter-spacing:5px; text-align:center; border-radius:5px; margin-bottom:15px;
}
#userlogin .input-btn:hover { background:#d10003; cursor:pointer; }/*cursor属性：设置鼠标的显示形状。poi是指的手型nter*/
#userlogin h6 { text-align:right;}
#userlogin h6 a { color:#999; text-decoration:none; margin-right:12px; }
#userlogin h6 a:hover {color:#c81d1f; }
</style>
</head>
<body>
<form action="#" method="post" name="userlogin" id="userlogin">
<h3>密码登录</h3>
<p><input class="input-text" type="text" placeholder="手机号/会员名/邮箱" autofocus required ></p>
<p><input class="input-text" type="password" required></p>
<p><input class="input-btn" type="submit" value="登录"></p>
<h6><a href="#">忘记密码</a><a href="#">免费注册</a></h6>
</form>
</body>
</html>
**
后续将考虑使用JavaScript实现对用户名和密码的合法性进行限制
对于用户名可接受的为11位手机号，邮箱格式以及中英名字
对于密码可接受的为包含中英文大小写和特殊字符
**
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
