HTML+CSS小米注册登录界面_m0_58811578_小米账号登录html

网络 02-07 4078

一个登录界面大家都有见过，那他是咋样实现的呢，这里给大家分享一下我的一下些经验

有不足之处阔以指出

js代码布局的 body{ padding: 0; margin: 0; } .left{ float: left; width: 25%; height: 755px; } .left img{ width: 100%; height: 100%; } .right{ float: left; height: 755px; width: 75%; } #ll{ float: left; } #ll img{ width: 165px; height: 58px; margin: 13px; } #rr{ float: right; font-size: 13.5px; color: gray; padding-top: 30px; padding-right: 30px; } #rr a{ color: gray; text-decoration-line: none; } #rr a:hover{ color: orange; } #box{ width: 450px; height: 600px; background-color: white; clear: both; margin: auto; margin-top: 100px; border-radius: 5px; box-shadow:0px 0px 50px 0px rgba(119, 119, 119, 0.1) ; text-align: center; } #zh,#sm{ margin-top: 45px; background-color: white; font-size: 22px; border: 0px; } #zh{ color: #ff6d00; } #sm{ color: gray; } #zh_ing{ display: block; } #sm_ing{ display: none; } input{ height: 60px; width: 330px; border-radius: 5px; background-color: #f9f9f9; border: 0px; margin-bottom: 20px; padding-left: 20px; font-size: 16px; } .orange{ height: 60px; width: 350px; background-color: #ffbe99; border: 0px; border-radius: 5px; font-size: 17px; color: white; } #bottom{ float: left; margin-left: 90px; } #bottom img{ width: 48px; height: 48px; margin-left: 14px; } #hh{ display: block; } #hh a{ color: #ff6d00; font-size: 17px; text-decoration-line: none; } #a1{ float: left; margin-left: 50px; } #a2{ float: right; margin-right: 50px; } #bb{ display: block; }

注册主体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="login.css"> <title>小米账号-注册</title> </head> <body>  <div class="top"> <a href="小米登录.html" class="title"></a> <h4>注册小米账号</h4> <div class="middle"> <form enctype="multipart/form-data"> <div style="width:500px;float:left;margin:0 20px;"> <br /> <span class="p" id="usernameCheckID">*</span> <label for="username" class="l">用户名:</label> <div style="position:relative;display:inline;"> <input id="username" type="text" style="height:30px;width:250px;padding-right:50px;" onblur="checkUserName()"/> </div> <br /><br /> <span class="p" id="phoneCheckId">*</span> <label for="phonenumber" class="l">手机号:</label> <div class="d"> <input id="phonenumber" type="text" class="i" onblur="checkPhoneNumber()"> </div> <br /><br /> <span class="c" id="passwordCheckID">*</span> <label for="login_password" class="l">登录密码:</label> <div class="d"> <input id="login_password" type="password" class="i" onblur="checkPassword()"/> </div> <br /><br /> <span class="c">*</span> <label for="confirm_password" class="l">确认密码:</label> <div class="d"> <input id="confirm_password" type="password" class="i"> </div> <br /><br /> <span class="p">*</span> <label for="phonenumber" class="l">兴趣:</label>     <div class="d"> <input type="checkbox" name="fav" id="" value="1" />唱歌 <input type="checkbox" name="fav" id="" value="2" />跳舞 <input type="checkbox" name="fav" id="" value="3" />绘画 <input type="checkbox" name="fav" id="" value="4" />游戏 <input type="checkbox" name="fav" id="" value="5" />游泳 <input type="checkbox" name="fav" id="" value="6" />下棋 <br /><br /> <span class="p">*</span> <label for="ver_code" class="l">验证码:</label> <div class="d"> <input id="ver_code" type="text" class="i"> </div> <br /><br /> <input type="checkbox" name="agree" style="margin-left:100px;display:inline-block;" value="1" /> <span style="font-size:10px;"><a href="https://static.account.xiaomi.com/html/agreement/user/zh_CN.html">我已阅读并同意《用户注册协议》</a></span> <br /><br /> <div> <input type="button" class="button"onclick='window.location.href=("小米登录.html")' value="同意以上协议并注册"> </div> </div> </form> </div> </div>   <div class="footer"> <ul> <li><a href="#">简体</a><span>|</span></li> <li><a href="#">繁体</a><span>|</span></li> <li><a href="#">English</a><span>|</span></li> <li><a href="#">常见问题</a><span>|</span></li> <li><a href="#">隐私政策</a></li> </ul> </div>  </body> <script> // 1.当失去焦点时,用户名校验函数 function checkUserName(){ // 1.1 获取到usernameID对应的input元素节点和username对应的校验span元素节点 var usernameNode = document.getElementById("username"); var usernameCheckNode = document.getElementById("usernameCheckID"); // 1.2 定义校验正则 var usernameReg = /^[\u4e00-\u9fa5]+$/ig; // 1.3 获取到username元素节点的value属性值 var usernameValue = usernameNode.value; // 1.4 判断value属性值是否匹配正则并进行相关处理 if (usernameReg.test(usernameValue)) { usernameCheckNode.innerText = "用户名输入成功！"; //当用户名输入成功时候的校验结果 usernameCheckNode.style.color = "green"; return true; } else{ usernameCheckNode.innerText = "用户名输入失败！请输入中文用户名"; //当用户名输入失败时候的校验结果 usernameCheckNode.style.color = "red"; return false; } } // 2.当失去焦点时,密码校验函数 function checkPassword(){ // 2.1 获取到passwordID对应的input元素节点和password对应的校验span元素节点 var passwordNode = document.getElementById("passwordID"); var passwordCheckNode = document.getElementById("passwordCheckID"); // 2.2 定义校验正则 var passwordReg = new RegExp("^[a-zA-Z]{2}[0-9]{4}$","ig"); // 2.3 获取到password元素节点的value属性值 var passwordValue = passwordNode.value; // 2.4 判断value属性值是否匹配正则并进行相关处理 if (passwordReg.test(passwordValue)) { passwordCheckNode.innerText = "密码输入成功！"; //当密码输入成功时候的校验结果 passwordCheckNode.style.color = "green"; return true; } else{ passwordCheckNode.innerText = "密码输入失败！密码为6位，前两位为英文字母，后四位为数字"; //当密码输入失败时候的校验结果 passwordCheckNode.style.color = "red"; return false; } } // 3.当失去焦点时,手机号校验函数 function checkPhoneNumber(){ // 3.1 获取到phoneID对应的input元素节点和phoneNumber对应的校验span元素节点 var phoneNode = document.getElementById("login_password"); var phoneCheckNode = document.getElementById("phoneCheckId"); // 3.2 定义校验正则 var phoneReg = /^1[0-9]{10}$/ig; // 3.3 获取到phoneNumber元素节点的value属性值 var phoneValue = phoneNode.value; // 3.4 判断value属性值是否匹配正则并进行相关处理 if (phoneReg.test(phoneValue)) { phoneCheckNode.innerText = "手机号输入成功！"; //当手机号输入成功时候的校验结果 phoneCheckNode.style.color = "green"; return true; } else{ phoneCheckNode.innerText = "手机号输入失败！请输入中国大陆手机号码"; //当手机号输入失败时候的校验结果 phoneCheckNode.style.color = "red"; return false; } } // 4.定义整体提交数据校验函数 function checkInput(){ if (checkUserName() && checkPassword() && checkPhoneNumber()) { alert("恭喜注册成功！"); return true; } else{ return false; } } // 注册信息存储 localStorage.setItem("confirm_password", userPass); localStorage.setItem("username", uName); console.log(userPass); console.log(surePass); window.location.href="小米登录.html"; return false; </script> </html>

登录主题相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="mi.css"> </head> <body> <div class="left"> <img src="left.png"> </div> <div class="right"> <div id="top"> <div id="ll"> <img src="logo.png"> </div> <div id="rr"> <a href="注册界面.html" style="color:#ff6d00; font-weight: bold ;font-size: 15px;">注册</a>     <a href="https://static.account.xiaomi.com/html/agreement/user/zh_CN.html">用户协议</a>     <a href="https://privacy.mi.com/miaccount/zh_CN/">隐私政策</a>     <a href="https://cn.account.xiaomi.com/helpcenter">帮助中心</a>   |    <a href="#">中文(简体)</a> </div> </div> <div> <div id="box"> <div> <p> <button id="zh">账号登录</button>     |     <button id="sm">扫码登录</button> <br><br> </p> <p id="zh_ing"> <input type="text" placeholder="邮箱/手机号码/小米ID" id="un"> <br> <input type="password" placeholder="密码" id="pwd"> <br> <button class="orange" id="login">登录</button> </p> <p id="sm_ing"> <img src="code.png"> <br> <br> <span style="color: gray;">请使用小米手机/米家等小米APP扫码登录</span> </p> </div> <div id="hh"> <div id="a1"> <a href="忘记密码.html" >忘记密码？</a> </div> <div id="a2"> <a href="#">手机号登录</a> </div> </div> <div id="bb"> <br> <br> <br> <br> <br> <p style="color: #9e9e9e;clear: both;"> 其它方式登录 </p> <div id="bottom"> <a href="#"><img src="1.jpg"></a> <a href="#"><img src="2 .jpg"></a> <a href="#"><img src="3.jpg"></a> <a href="#"><img src="4.jpg"></a> </div> </div> </div> </div> </div> <script src="mi.js"></script> </body> </html>