碼上快樂

相關內容    簡體    繁體

登錄注冊界面模板

本文轉載自   查看原文   2020-04-14 18:27   5188    HTML/CSS/JS/ 網盤搭建（知識匯總)/ 基於HDFS的網盤系統設計與實現

登錄注冊界面

<html>
<head>
<title>登陸</title>
</head>
<body>
    <form>
        請登陸</br>
        賬號：<input type = "text"/> </br>
        密碼：<input type = "password" id="psw1" class = "psw1" />
        </br>
        記住密碼：
        <input type ="checkbox">
        <input type = "submit" />
    </form>
</body>
</html>

案例一

具體實現

先看一下最終效果，登陸和注冊

背景圖片：

 

附源碼：

login.html

<!DOCTYPE html>
<!-- saved from url=(0047)file:///D:/web%E8%84%9A%E6%9C%AC/WEB/login.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>登陸</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(Desert.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
         
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }a
         
        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }
         
        #name_trip {
            margin-left: 50px;
            color: red;
        }
         
        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }
         
        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
           background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
         
        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
</head>
 
<body>
    <div id="loginDiv">
        <form action="file:///D:/web%E8%84%9A%E6%9C%AC/WEB/login.html" id="form">
            <h1 style="text-align: center;color: aliceblue;">登陸</h1>
            <p>用戶名:<input id="userNname" type="text"><label id="name_trip"></label></p>
 
            <p>密碼:  <input id="password" type="password"><label id="password_trip"></label></p>
 
            <div style="text-align: center;margin-top: 30px;">
                <input type="submit" class="button" onclick="window.open(&quot;meinv.jpg&quot;)" value="登陸">
                <input type="reset" class="button" value="重置">
            </div>
        </form>
    </div>
 

</body></html>
View Code

register.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="register/html; charset=gb2312">
    <title>注冊</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(Desert.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
        
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        
        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 650px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }
        
        #name_trip {
            margin-left: 50px;
            color: red;
        }
        
        p,
        .sexDiv {
            margin-top: 10px;
            margin-left: 20px;
            color: azure;
        }
        
        .sexDiv>input,
        .hobby>input {
            width: 30px;
            height: 17px;
        }
        
        input,
        select {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
        
        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
        
        .introduce {
            margin-left: 110px;
        }
        
        .introduce>textarea {
            background-color: rgba(216, 191, 216, 0.5);
            border-style: hidden;
            outline: none;
            border-radius: 5px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 20px;
            color: #f0edf3;
        }
        
        b {
            margin-left: 50px;
            color: #FFEB3B;
            font-size: 10px;
            font-weight: initial;
        }
    </style>
</head>

<body>
    <div id="loginDiv">
        <form action="">
            <h1>注冊</h1>
            <p>用戶姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p>

            <p>用戶密碼:<input id="password" type="password" required><label id="password_trip"></label></p>

            <p>確認密碼:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p>
<!--
            <p>
                用戶類型:
                <select name="type" id="userType">
                    <option value="0">請選擇</option>
                    <option value="1">普通類型</option>
                    <option value="2">VIP類型</option>
                </select>
                <label id="type_trip"></label>
            </p>

            <div class="sexDiv">
                用戶性別:
                <input class="userSex" name="sex" value="boy" type="radio">男
                <input class="userSex" name="sex" value="girl" type="radio">女
                <label id="sex_trip"></label>
            </div>

            <p>
                出生日期:
                <input id="birthday" type="date">
                <label id="birthday_trip"></label>
            </p>

            <p class="hobby">
                興趣愛好:
                <input type="checkbox" name="hobby" value="read">閱讀
                <input type="checkbox" name="hobby" value="music">音樂
                <input type="checkbox" name="hobby" value="sport">運動
                <label id="hobby_trip"></label>
            </p>

            <p>
                電子郵件:
                <input id="email" type="email" required>
                <label id="emil_trip"></label>
            </p>


            <p> 自我介紹:</p>
            <div class="introduce">
                <textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea>
                <label id="introduce_trip"></label>
            </div>
-->
            <p style="text-align: center;">
                <input type="submit" class="button" onblur="checkForm()" onclick='window.open("login.html")'value="提交">
                <input type="reset" class="button" value="重置">
            </p>
        </form>
    </div>

</body>
<script type="text/javascript">
    function trip(obj, trip) {
        document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
    }

    function checkSex() {
        var sexNum = document.getElementsByName("sex");
        var sex = "";
        for (let i = 0; i < sexNum.length; ++i) {
            if (sexNum[i].checked) {
                sex = sexNum[i];
             }

         }
         if (sex == "") {
             trip("sex_trip", "ERROR!!");
             return false;
         } else {
             trip("sex_trip", "OK!!");
         }
    }

    function checkHobby() {
        var hobbyNum = document.getElementsByName("hobby");
        var hobby = "";
        for (let i = 0; i < hobbyNum.length; ++i) {
            if (hobbyNum[i].checked) {
                hobby = hobbyNum[i];
            }
        }
        if (hobby == "") {
            trip("hobby_trip", "ERROR!!");
            return false;
        } else {
            trip("hobby_trip", "OK!!");

        }
    }

    function checkSelect() {
        var myselect = document.getElementById("userType");
        var index = myselect.selectedIndex;
        var checkValue = myselect.options[index].value;
        if (checkValue == 0) {
            trip("type_trip", "請選擇!!");
            return false;
        } else {
            trip("type_trip", "OK!!");
        }
    }

    function checkForm() {
        checkSelect();
        checkHobby();
        checkSex();

        var trip = document.getElementsByName("em");
        var tripV = trip.innerHTML();
        //獲取用戶名輸入項
        var userNname = document.getElementById("userNname");
        var uName = userNname.value;
        if (uName.length < 1 || uName.length > 10) {
            trip("name_trip", "賬號長度為1-10位!!");
            return false;
        } else {
            trip("name_trip", "OK!!");

        }

        //密碼長度大於6 和確認必須一致 
        var password = document.getElementById("password");
        var userPass = password.value;
        if (userPass.length < 6) {
            trip("password_trip", "密碼要>6位!!");
            return false;
        } else {
            trip("password_trip", "OK!!");
        }

        //獲取確認密碼框的值 var
        var surePassword = document.getElementById("surePassword");
        var surePass = surePassword.value;
        if (userPass != surePass) {
            trip("surePassword_trip", "兩次密碼不一致!!");
            return false;
        }

        //校驗郵箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        var inputEmail = document.getElementById("email");
        var uEmail = inputEmail.value;
        if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
            trip("emil_trip", "郵箱不合法!!");
            return false;
        } else {
            trip("emil_trip", "OK!!");
        }

        // 校驗自我介紹
        var introduceText = document.getElementById("introduceText");
        var introduce = introduceText.value;
        if (introduce.length < 3 || uName.length > 60) {
            trip("introduce_trip", "長度為3-50字!!");
            return false;
        } else {
            trip("introduce_trip", "OK!!");
        }

        return true;
    }

    function submitT() {
        if (checkForm()) {
            return true;
        } else {
            return false;
        }
    }
</script>
</html>
View Code

案例二

登陸注冊翻轉界面

附源碼：

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/index.css"  />
        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

        
    </head>
    <body>
        <body>
  <div class="mainbody middle">
    <form class="form-box front">
      <div>
        <h1>網盤登陸 </h1>
      </div>
      <div>
        <input class="input-normal" type="text" placeholder="UserAccount" />
        <input class="input-normal" type="password" placeholder="PassWord" />
            <button class="btn-submit" type="submit">
                  <a href="http://www.baidu.com/"> 登陸</a>  
            </button>
            <style> 
                a{ text-decoration:none} 
            </style>
      </div>
      <div>
        <p style="margin-top: 40px">If you don't have account.Please</p>
        <p>Click here to <a id="signup">注冊</a></p>
          <script type="text/javascript">

       // 點擊sigup觸發翻轉樣式
        $("#signup").click(function() {
         $(".middle").toggleClass("middle-flip");
        });
        
        
        </script>
        
      </div>
    </form>
    <!-- 對的你沒看錯，上下兩個表單基本上沒區別，一個front，一個back -->
    <form class="form-box back">
      <div>
        <h1>網盤注冊</h1>
      </div>
      <div>
        <input class="input-normal" type="text" placeholder="UserAccount" />
        <input class="input-normal" type="password" placeholder="PassWord" />
        <button class="btn-submit" type="submit">
              注冊
        </button>
      </div>
      <div>
        <p style="margin-top: 40px">Have a account ? You can</p>
        <p>Click here to <a id="login">登陸</a></p>
        <script type="text/javascript">

      // 點擊login觸發翻轉樣式
        $("#login").click(function() {
        $(".middle").toggleClass("middle-flip");
        });
        
        </script>
        
      </div>
    </form>
  </div>
</body>
    </body>

</html>
View Code

CSS

body {
  /*顏色這個看個人喜好*/
  background: darkslategrey;
  /*字體這個看個人喜好*/
  font-family: sans-serif;
}

/*主要是規定中間表單尺寸，調整到自己覺得好看就行了*/
.mainbody {
  height: 440px;
  width: 400px;
}


/*居中效果*/
.middle {
  /*使左上角對應到父元素的中心*/
  top: 50%;
  left: 50%;
  position: absolute;
  /*向左向上偏移50%*/
  transform: translate(-50%, -50%);
}

.form-box {
  width: 100%;
  height: 100%;
  margin: auto;
  background: darkcyan;
  /* 我覺得這個圓角大小剛剛好 */
  border-radius: 40px;
}

.input-normal {
  width: 220px;
  height: 38px;
  margin: 30px auto;
  padding: 0;
  text-align: center;
  border-radius: 20px;
  outline: none;
  display: block;
  transition: 0.3s;
  border: 1px solid #e6e6e6;
}

.btn-submit {
  width: 100px;
  height: 36px;
  margin: auto;
  font-size: 18px;
  text-align: center;
  color: white;
  border-radius: 20px;
  display: block;
  background: darkslategrey;
  transition: 0.3s;
}

.front {
  transform: rotateY(0deg);
}

/* 將back旋轉180度，背面朝向用戶，我這邊選y軸的 */
.back {
  transform: rotateY(-180deg);
}

.front,
.back {
  position: absolute;
  /* 然后設置為背面朝向用戶時不可見 */
  backface-visibility: hidden;
  /* 我覺得用linear順滑一點 */
  transition: 0.3s linear;
}

/* 將front旋轉180度 */
.middle-flip .front {
  transform: rotateY(180deg);
}
/* 將back旋轉180度 */
.middle-flip .back {
  transform: rotateY(0deg);
}

/* 我調整了一下，感覺還不錯的樣式，你可以改成其他的好看點的 */
p {
  margin: 15px auto;
  padding: 0;
  font-size: 16px;
  color: white;
  display: block;
  text-align: center;
}
a {
  color: aqua;
  cursor: pointer;
}
View Code

js(自己插入jqueery代碼）

jquery-1.11.0.js

效果

可以考慮在 transfrom 后面加點 perspective ，增強立體感 perspective(600px)


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 簡單登錄注冊界面 登錄注冊界面 android注冊登錄界面 注冊登錄頁面模板 HTML登錄注冊界面怎么制作？ php實現登錄注冊界面 界面設計：登錄與注冊 一個簡易的登錄、注冊界面 JSP登錄驗證注冊界面 layui-簡單的登錄注冊界面
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM