簡單登錄注冊界面

今天分享下一簡單的登錄注冊界面。

        
        <div class="wrapper mark" style="display: block;">        
                <div class="main">
                    <form action="index.html" name="myForm">
                        <div class="top">
                            <div class="login1 ">
                                登錄
                            </div>
                            <div class="registe">
                                注冊
                            </div>
                            <span class="close">×</span>
                        </div>
                        <div class="body">
                            <div class="body_login" style="display: block;">
                                <div class="userName clear">
                                    <label>賬號：</label><input type="text" id="userName" placeholder="用戶名">
                                </div>
                                <div class="password">
                                    <label>密碼：</label><input type="password" id="pwd" placeholder="密碼">
                                </div>
                                <div class="btn2">
                                    <input type="button" value="登錄"/>
                                    <input type="reset" value="重置"  />
                                </div>
                            </div>
                            <div class="body_registe" style="display: none;">
                                <div class="clear">
                                    <label>賬號：</label><input type="text"  value="" placeholder="請輸入手機號" />
                                    <label>密碼：</label><input type="password" placeholder="請輸入密碼" />
                                    <label>密碼確認：</label><input type="password" placeholder="請再次輸入密碼" />
                                    <label>e-mail：</label><input type="email" placeholder="請輸入郵箱"/>
                                </div>
                                <div class="btn2">
                                    <input type="submit" value="提交"  />
                                    <input type="reset" value="重置" />
                                    <input type="button" value="返回" />
                                </div>
                            </div>
                        </div>

                            
                    </form>
                </div>
        </div>

CSS

        <style>

            button,input{
                outline: none;
            }
            .wrapper {
                width: 100%;
                height: 100%;
                overflow: hidden;
                background-color: #969696;
            }
            .main {
                padding: 40px 0px;
                width: 100%;
                height: 100%;
                position: absolute;
                background-color: #969696;
                opacity: 0.5;
            }
            
            form {
                width: 340px;
                margin: 0 auto;
                background-color: #FFFFFF;
                box-shadow: 0 0 15px 0 rgb(220, 222, 230);
                border-radius: 5px;
            }
            
            .main form input {
                margin: 10px 0;
                width: 200px;
                height: 35px;
                border-radius: 3px;
                display: inline-block;    
                border: 1px solid #000;
                padding-left: 10px;
            }
            
    
            .top{
                height: 30px;
                text-align: center;
                position: relative;
            }
            .top .login1 {
                line-height: 30px;
                letter-spacing: 10px;
                float: left;
                width: 45%;
                border-right: 1px solid rgba(165, 161, 161, 0.1);
                border-bottom: 1px solid rgba(165, 161, 161, 0.1);
            }
            .top .registe{
                line-height: 30px;
                letter-spacing: 10px;
                float: left;
               width: 45%;
                border-right: 1px solid rgba(165, 161, 161, 0.1);
                border-bottom: 1px solid rgba(165, 161, 161, 0.1);                
            }
            .top .close{
                width: 20px;
                height: 20px;
                position: absolute;
                top: 5px;
                   right: 7px;
                   font-size: 20px;
                   
            }
            .clear{
                clear: both;
            }
            .body label{
                text-align: right;
                display: inline-block;
                width: 100px;
                height: 35px;
            }
            .btn2{
                display: flex;
                justify-content: space-around;
            }
            .main form .btn2 input{
                width: 30%;
                background-color: lightskyblue;
                border-radius: 5px;
                line-height: 30px;
                letter-spacing: 10px;
                cursor:pointer;
                text-align: center;
            }

tab欄切換JS

<script>
            var login=document.querySelector(".login1");
            var registe=document.querySelector(".registe");
            var body_login=document.querySelector(".body_login");
            var body_registe=document.querySelector(".body_registe");
            
        
            
            login.onclick=function(){
                //console.log(1);
                login.style.backgroundColor="blue";
                body_login.style.display="block";
                body_registe.style.display="none";
                registe.style.backgroundColor="";
            }
            registe.onclick=()=>{
                //console.log(2);
                login.style.backgroundColor="";
                registe.style.backgroundColor="blue";
                body_login.style.display="none";
                body_registe.style.display="block";
                
            }
        
            
        </script>

本次登錄注冊界面不算難，還缺少對文本框為空，密碼前后不一致的問題，下次再分享