今天学习了登录和注册页面的设计，主要是HTML和CSS部分，注册和切换采用了Js代码进行，后面将通过js进行填写内容的验证，进而可通过JSP跳转到Servlet进行DAO数据的校验，这属于后端部分了。
总体设计思路：整个页面设计可以分为主体（content）、头部（content-header）、内容（content-body）三个部分组成，其中是主体是根部，包含了头部和内容，头部和内容各自下设两个盒子（div）。
1、最终效果图：
2、代码部分：
（1）HTML代码部分（包含点击头部自动切换登录和注册页）：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登录</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="css/index.css"></head><body><!--主体--><section id="content"><!--头部--><div class="content-header clearfix"><a href="javaScript:;" class="current">我要登录</a><a href="javaScript:;" >我要注册</a></div><!--内容--><div class="content-body"><div class="dom" style="display: block"><form action=""><div class="s1"><h4>账号</h4><input type="text" name="user" placeholder="用户名/手机/邮箱"></div><div class="s1"><h4>密码</h4><input type="text" name="pwd" placeholder="请输入密码"></div><div class="s2"><input type="checkbox"><span> 记住密码</span></div><input type="submit" value="登 录" class="btn"></form><div class="dom-footer"><div class="login-another"><a href="#">找回密码</a><span>|</span><span>还没有注册账号</span><a href="#">立即注册</a></div><div class="login-three"><span>第三方账号直接登录</span><div class="login-icon"><a href="#"><img src="images/qq2.png" alt=""></a><a href="#"><img src="images/wechat.png" alt=""></a></div></div></div></div><div class="dom"><form action=""><div class="s1"><h4>手机号码</h4><input type="text" name="phone" placeholder="填写你的手机号码作为登录账号"></div><div class="s1"><h4>用户名</h4><input type="text" name="user" placeholder="中、英文均可，最长20个字符或10个汉字"></div><div class="s1"><h4>密码</h4><input type="password" name="password" placeholder="6-30位英文、数字、符号、区分大小写"></div><div class="s1 msg-code"><h4>短信验证码</h4><input type="text" name="msgcode" placeholder="填写短信验证码"><input type="button" name="bnt" value="获取短信验证码"></div><div class="s1"><h4>邀请码(<span style="color:purple">选填</span>)</h4><input type="text" name="code" placeholder="如果有邀请码，请填写"></div><input type="submit" value="注 册" class="btn"></form><div class="dom-footer"><div class="login-three"><span>第三方账号直接登录</span><div class="login-icon"><a href="#"><img src="images/qq2.png" alt=""></a><a href="#"><img src="images/wechat.png" alt=""></a></div></div></div></div></div></section><script type="application/javascript" >window.onload=function () {let as=document.getElementsByClassName('content-header')[0].getElementsByTagName('a');let contents=document.getElementsByClassName("dom");for (let i=0;i<as.length;i++){let a=as[i];a.id=i;// 设置每个a标签的onclick事件a.onclick=function () {// 清楚所有标签的css设置，隐藏dom标签for(let j=0;j<as.length;j++){as[j].className="";contents[j].style.display="none";}// 设置当前标签样式及当前标签下的所有dom标签可见this.className='current';// 当前div可见contents[this.id].style.display='block';}}}</script></body></html>
（2）CSS部分：
/***********************默认样式*********************************************/*{margin: 0;padding: 0;text-decoration: none;list-style: none;box-sizing: border-box;}.clearfix::before,.clearfix::after{content: '';display: block;clear: both;}input,button{outline: none;}html{font-size: 10px;}body{font-size: 1.4rem;}a{color: purple;}/*************************主体设计**************************************//*主体*/#content{width: 50rem;/*height: 60rem;*/border: 0.1rem solid #cccccc;margin: 5rem auto;}/*头部*//*#content .content-header{*//* border: 0.1rem solid blue;*//*}*/#content .content-header a{height: 6rem;width: 50%;background-color: #ebebeb;color: #666666;display: inline-block;float: left;/*水平居中*/text-align: center;/*垂直居中*/line-height: 6rem;font-size: 1.6rem;}#content .content-header a.current{background-color: transparent;color: purple;}/*内容*/#content .content-body{/*background-color: red;*/padding: 4rem;}#content .content-body .dom{width: 100%;display: none;}#content .content-body .dom .s1{/*background-color: red;*/margin-bottom: 2rem;}#content .content-body .dom .s1 h4{color:black;}#content .content-body .dom .s1 input{width: 100%;height: 4rem;margin-top: 0.5rem;padding-left:0.5rem ;border-radius: 5px;border:1px solid #cccccc;}#content .content-body .dom .s2{margin-bottom: 2rem;color: black;font-size: 1.4rem;}#content .content-body .dom .btn{width: 100%;height: 3.5rem;border: none;background-color: purple;color: white;font-size: 1.8rem;margin-bottom: 2rem;text-align: center;line-height: 3.5rem;border-radius: 5px;}/*#content .content-body .dom .dom-footer{*//* background-color: red;*//*}*/#content .content-body .dom .dom-footer .login-another{/*background-color: red;*/color: #666666;margin-bottom: 2rem;text-align: center;line-height: 100%;}#content .content-body .dom .dom-footer .login-another span{margin: 0 0.5rem;}#content .content-body .dom .dom-footer .login-three{/*background-color: red;*/text-align: center;line-height: 100%;color: #666666;margin-top: 2rem;}#content .content-body .dom .dom-footer .login-three span{margin-bottom: 2rem;font-size: 1.2rem;position: relative;}/*创建字体前的线条*/#content .content-body .dom .dom-footer .login-three span::before{content: '';display: inline-block;width: 12rem;border: 1px solid #e0e0e0;position: absolute;top:50%;left: -125%;}/*创建字体后的线条*/#content .content-body .dom .dom-footer .login-three span::after{content: '';display: inline-block;width: 12rem;border: 1px solid #e0e0e0;position: absolute;top:50%;right: -125%;}#content .content-body .dom .dom-footer .login-three img{margin-top: 2rem;height: 3rem;width: 3rem;border-radius: 50%;}#content .content-body .dom .msg-code input{width: 49%;}#content .content-body .dom .msg-code input:last-child{color: #666666;cursor: pointer;}
总的来说熟悉以后应该可以很快完成类似页面，只要登录页完成后，注册页很快就可以完成。
