登陆界面设计
撸代码之前先来看一看效果图：
登陆界面由一个简单的表单（头像、用户名、密码、登陆按钮、记住我、取消、忘记密码），创建了一个CSS3的缩放效果构成。需要做浏览器（Firefox、Safari and Chrome、Opera）兼容处理和 @media 简单响应式设计。文本输入框做了 required 必须填写条件，运用在项目中可以通过 JavaScript 约束验证 DOM 方法checkValidity()、setCustomValidity()等做异常处理。
代码实现
HTML 页面布局：需引入下文的 JavaScript 脚本和 CSS 修饰
<body><!--此元素被显示--><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">登录</button><div id="id01" class="modal"><form class="modal-content animate" action=""><div class="imgcontainer"><!--此元素不会被显示--><span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span><img src="" alt="Avatar" class="avatar"></div><div class="container"><label><b>Username</b></label><input type="text" placeholder="Enter Username" name="uname" required><label><b>Password</b></label><input type="password" placeholder="Enter Password" name="psw" required><button type="submit">登陆</button><input type="checkbox" checked="checked"> 记住我</div><div class="container" style="background-color:#f1f1f1"><button type="button" onClick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button><span class="psw">Forgot<a href="#">Password?</a></span></div></form></div></body>
JavaScript 脚本：通过 onclick 事件控制登陆模型的显示和关闭。event.target 可以理解为点击事件的聚焦点。
<script type = "text/javascript">// 获取模型var modal = document.getElementById('id01');// 鼠标点击模型外区域关闭登录框window.onclick = function(event) {if (event.target == modal) {// 此元素不会被显示modal.style.display = "none";}} </script>
CSS 修饰：
文本输入框通过 input[type=text], input[type=password] 统一控制cursor: pointer 光标呈现为指示链接的指针（一只手），cursor 控制贯标样式border-radius: 50% 以百分比定义圆角的形状position: fixed; z-index: 1; left: 0; top: 0; position、z-index、left、top共同控制模型在所有内容的上方（堆叠顺序1上方，-1下方）@keyframes animatezoom 创建动画 animatezoom@-webkit-keyframes animatezoom 设置动画兼容-webkit-引擎浏览器 Firefox@-moz-keyframes animatezoom 设置动画兼容-moz-引擎浏览器 Safari and Chrome@-o-keyframes animatezoom 设置动画兼容-o-引擎浏览器 Opera-webkit-animation: animatezoom 0.6s 把动画添加到修饰器中并兼容设置
@charset "utf-8";/* CSS Document *//* 宽屏输入字段 */input[type=text], input[type=password] {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;box-sizing: border-box;}/* 为所有按钮设置样式 */button {background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer; /*光标呈现为指示链接的指针（一只手）*/width: 100%;}button:hover {opacity: 0.8; /*设置 div 元素的不透明级别*/}/* 取消按钮的其他样式 */.cancelbtn {width: auto;padding: 10px 18px;background-color: #f44336;}/* 将图像居中 */.imgcontainer {text-align: center;margin: 24px 0 12px 0;position: relative;}/*控制图片形状*/img.avatar {width: 40%;border-radius: 50%; /*以百分比定义圆角的形状*/}/* 定位关闭按钮 */.close {position: absolute; /*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。*/right: 25px;top: 0;color: #000;font-size: 35px;font-weight: bold;}/* 光标移动到关闭按钮 */.close:hover,.close:focus {color: red;/*光标呈现为指示链接的指针（一只手）*/cursor: pointer; }.container {padding: 16px;}/* 忘记密码 */span.psw {float: right;padding-top: 16px;}/* 登陆弹框模型 */.modal {display: none; /* 默认隐藏模型 */position: fixed; /* 生成绝对定位的元素，相对于浏览器窗口进行定位。 *//* z-index、left、top共同控制模型在所有内容的上方 */z-index: 1; left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* 如果需要，启用滚动条 */background-color: rgb(0,0,0); /* 回退颜色 */background-color: rgba(0,0,0,0.4); /* 黑色 */padding-top: 60px;}/* 模型内容 */.modal-content {background-color: #fefefe;margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */border: 1px solid #888;width: 30%; /* Could be more or less, depending on screen size */}/* 添加缩放动画 */.animate {-webkit-animation: animatezoom 0.6s; /*兼容-webkit-引擎浏览器*/-moz-animation: animatezoom 0.6s; /*兼容-moz-引擎浏览器*/-o-animation: animatezoom 0.6s; /*兼容-o-引擎浏览器*/animation: animatezoom 0.6s}/*1. transform:scale(x,y)x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。2. 关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。*//*创建动画animatezoom,把它绑定到 animate 选择器*/@keyframes animatezoom {from {transform: scale(0)} to {transform: scale(1)}}/* 设置动画兼容-webkit-引擎浏览器 Firefox */@-webkit-keyframes animatezoom {from {transform: scale(0)} to {transform: scale(1)}}/*设置动画兼容-moz-引擎浏览器 Safari and Chrome*/@-moz-keyframes animatezoom {from {transform: scale(0)} to {transform: scale(1)}}/*设置动画兼容-o-引擎浏览器 Opera*/@-o-keyframes animatezoom {from {transform: scale(0)} to {transform: scale(1)}}/* @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。这里，如果文档宽度小于 300 像素则操作修改，在额外的小屏幕上更改span和cancel按钮的样式 */@media screen and (max-width: 300px) {span.psw {display: block;float: none;}.cancelbtn {width: 100%;}}
@media screen and (max-width: 300px) ：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。如果文档宽度小于 300 像素则操作修改，在额外的小屏幕上更改span和cancel按钮的样式。
注意：
1. transform:scale(x,y)
x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。
Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。
2. 关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
注册界面设计
撸码之前先来看一下效果图：
注册界面由一个简单的表单（Email、用户名、密码、重复密码、注册按钮、记住我、取消），创建了一个CSS3的缩放效果构成。同样需要做浏览器（Firefox、Safari and Chrome、Opera）兼容处理和 @media 简单响应式设计。文本输入框做了 required 必须填写条件，运用在项目中可以通过 JavaScript 约束验证 DOM 方法checkValidity()、setCustomValidity()等做异常处理。
代码实现
HTML 页面布局：同样需引入下文的 JavaScript 脚本和 CSS 修饰
<body><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">注册</button><div id="id01" class="modal"><span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span><form class="modal-content animate" action=""><div class="container"><label><b>Email</b></label><input type="text" placeholder="Enter Email" name="email" required><label><b>Password</b></label><input type="password" placeholder="Enter Password" name="psw" required><label><b>Repeat Password</b></label><input type="password" placeholder="Repeat Password" name="psw-repeat" required><input type="checkbox" checked="checked"> Remember me<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p><div class="clearfix"><button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button><button type="submit" class="signupbtn">Sign Up</button></div></div></form></div></body>
JavaScript 脚本：通过 onclick 事件控制登陆模型的显示和关闭。event.target 可以理解为点击事件的聚焦点。
<script type="text/javascript">// 获取模型var modal = document.getElementById('id01');// 鼠标点击模型外区域关闭登录框window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}}</script>
CSS 修饰：同登陆类似，文本输入框的统一控制、浏览器兼容处理、简单响应式的设计
@charset "utf-8";/* CSS Document *//* 宽屏输入字段 */input[type=text], input[type=password] {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;box-sizing: border-box;}/* 为所有按钮设置样式 */button {background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer;width: 100%;}/* 取消按钮的其他样式 */.cancelbtn {padding: 14px 20px;background-color: #f44336;}/* 浮动取消和注册按钮，并添加一个相同的宽度 */.cancelbtn,.signupbtn {float:left;width:50%}/* 向容器元素添加填充 */.container {padding: 16px;}/* 注册弹框模型 */.modal {display: none; /* 在默认情况下隐藏 */position: fixed; /* 生成绝对定位的元素，相对于浏览器窗口进行定位。 *//* z-index、left、top共同控制模型在所有内容的上方 */z-index: 1; left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* 如果需要，启用滚动条 */background-color: rgb(0,0,0); /* 回退颜色 */background-color: rgba(0,0,0,0.4); /* 黑色 */padding-top: 60px;}/* 模型内容 */.modal-content {background-color: #fefefe;margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */border: 1px solid #888;width: 50%; /* Could be more or less, depending on screen size */}/* 定位关闭按钮 */.close {position: absolute;right: 35px;top: 15px;color: #000;font-size: 40px;font-weight: bold;}/* 光标移动到关闭按钮 */.close:hover,.close:focus {color: red;/*光标呈现为指示链接的指针（一只手）*/cursor: pointer; }/* 设置浮动*/.clearfix::after {content: "";clear: both;display: table; /*此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。*/}/* 添加缩放动画 */.animate {-webkit-animation: animatezoom 0.6s; /*兼容-webkit-引擎浏览器*/-moz-animation: animatezoom 0.6s; /*兼容-moz-引擎浏览器*/-o-animation: animatezoom 0.6s; /*兼容-o-引擎浏览器*/animation: animatezoom 0.6s}/*1. transform:scale(x,y)x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。2. 关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。*//*创建动画animatezoom,把它绑定到 animate 选择器*/@keyframes animatezoom {from {transform: scale(0)} to {transform: scale(1)}}/* 设置动画兼容-webkit-引擎浏览器 Firefox */@-webkit-keyframes animatezoom {from {transform: scale(0)} to {transform: scale(1)}}/*设置动画兼容-moz-引擎浏览器 Safari and Chrome*/@-moz-keyframes animatezoom {from {transform: scale(0)} to {transform: scale(1)}}/*设置动画兼容-o-引擎浏览器 Opera*/@-o-keyframes animatezoom {from {transform: scale(0)} to {transform: scale(1)}}/* @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。这里，如果文档宽度小于 300 像素则操作修改，在额外的小屏幕上更改取消和注册按钮的样式 */@media screen and (max-width: 300px) {.cancelbtn, .signupbtn {width: 100%;}}
@media screen and (max-width: 300px)：如果文档宽度小于 300 像素则操作修改，在额外的小屏幕上更改取消和注册按钮的样式 。
这里通过 JavaScript + CSS/CSS3 + HTML 简单的解释网页登陆 + 注册的界面设计，只是用于新手学习入门，还有很多的功能添加、异常处理等问题需要解决。在运用到项目中时可以根据业务进行拓展完善。
