一个简单的登录和注册HTML CSS开发页面

admin · 发表于 2019-11-12 08:06:54

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！

您需要登录才可以下载或查看，没有账号？注册

x

一个简单的登录和注册HTML CSS开发页面

登录代码：

[mw_shl_code=html,true]<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">
<title>This is a login form</title>

<style>
      .modal {
         display: none;
         width: 100%;
         height: 100%;
         position: fixed;
         overflow: auto;
         z-index: 1;
         left: 0;
         top: 0;
         background-color: rgb(0, 0, 0);
         /* Fallback color */
         background-color: rgba(0, 0, 0, 0.4);
         /* Black w/ opacity */
         padding-top: 60px;

      }

      .modal-content {
         width: 60%;
         background-color: #fefefe;
         margin: 5% auto 15% auto;
         border: 1px solid #888;

      }

      /* The Close Button (x) */
      .closeButton {
         position: absolute;
         right: 25px;
         top: 0;
         color: #000;
         font-size: 35px;
         font-weight: bold;
      }

      .cancelbutton {
         width: auto;
         padding: 10px 18px;
         background-color: #f44336;
      }

      span.password {
         float: right;
         padding-top: 16px;
      }

      .closeButton:hover,
      .closeButton:focus {
         color: firebrick;
         cursor: pointer;

      }

      .imgcontainer {
         text-align: center;
         margin: 24px 0 12px 0;
         position: relative;
      }

      .avtar {
         width: 40%;
         border-radius: 50%;
      }

      .container {
         padding: 16px;
      }

      /* Full-width input fields */
      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;
      }

      /* Set a style for all buttons */
      button {
         background-color: #4CAF50;
         color: white;
         padding: 14px 20px;
         margin: 8px 0;
         border: none;
         cursor: pointer;
         width: 100%;
      }

      button:hover {
         opacity: 0.8;
      }

      /* Add Zoom Animation */
      .animate {
         -webkit-animation: animatezoom 0.6s;
         animation: animatezoom 0.6s
      }

      @-webkit-keyframes animatezoom {
         from {
            -webkit-transform: scale(0)
         }

         to {
            -webkit-transform: scale(1)
         }
      }

      @keyframes animatezoom {
         from {
            transform: scale(0)
         }

         to {
            transform: scale(1)
         }
      }
      /* Change styles for span and cancel button on extra small screens */
      @media screen and (max-width: 300px) {
         span.password {
            display: block;
            float: none;
         }

         .cancelbutton {
            width: 100%;
         }
      }
</style>
</head>

<body>

<button id="login">login</button>
<button id="register">register</button>

<div id="formPanel" class="modal">
      <form action="./img/logo.png" class="modal-content animate">
         
         <div class="imgcontainer">
            <span id="closeButton" class="closeButton"

                  title="close form">×</span>
            <img src="./img/img_avatar.png" alt="avatar" class="avtar">
         </div>
         
         <div class="container">
            <label><b>UserName</b></label>
            <input type="text" placeholder="username" class="username" required>
            <label><b>Password</b></label>
            <input type="password" placeholder="password" class="password" required>
            <button class="loginButton">Login</button>
            <input type="checkbox" checked>Remember Me
         </div>

         <div class="container">
            <button class="cancelbutton" type="button"
               >Cancel</button>
            <span class="password">Forgot
                  <a href="#">password?</a>
            </span>
         </div>
      </form>
</div>

<script>

      function loginForm() {
         var formx = document.getElementById("formPanel")
         formx.style.display = "block"
      }
</script>

</body>

</html>[/mw_shl_code]

注册代码

[mw_shl_code=html,true]<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">
<title>register form</title>

<style>
      .panel {
         width: 100%;
         height: 100%;
         background-color: rgb(0, 0, 0, 0.2);
         padding-top: 30px;
         overflow: auto;
         position: fixed;
         left: 0;
         right: 0;
         z-index: 1;
      }

      .modal-content {
         background: #fefefe;
         width: 60%;
         border: 1px solid #888;
         margin: 5% auto 25% auto;

      }

      .container {
         padding: 16px;
      }

      .close {
         font-size: 40px;
         position: absolute;
         top: 15px;
         right: 20px;
      }

      .close:hover,
      .close:focus {
         color: red;
         cursor: pointer;
      }

      input[type=text],
      input[type=password] {
         width: 100%;
         padding: 12px 20px;
         margin: 8px auto;
         border: 1px solid #cccccc;
         display: inline-block;
      }

      button {
         background-color: #4CAF50;
         color: white;
         padding: 14px 20px;
         margin: 8px 0;
         border: none;
         cursor: pointer;
         width: 100%;
      }

      .cancelbutton {
         padding: 14px 20px;
         background-color: #f44336;
      }

      .cancelbutton,
      .registerbutton {
         float: left;
         width: 50%
      }

      .clearfix::after {
         content: "";
         clear: both;
         display: table;
      }
</style>

</head>

<body>

<div id="modal" class="panel">
      <span class="close">x</span>
      <form action="#" class="modal-content">
         <div class="container">
            <label>Email</label>
            <input type="text" placeholder="Emmail" required>
            <label>Username</label>
            <input type="text" placeholder="username" required>
            <label>password</label>
            <input type="password" placeholder="password" required>
            <input type="checkbox" checked> remember me
            <p>Follow the policy <a href="#">terms & privacy</a></p>

            <div class="clearfix">
                  <button class="cancelbutton">Cancel</button>
                  <button class="registerbutton">Register</button>
            </div>
         </div>
      </form>
</div>

</body>

</html>[/mw_shl_code]

lacconi · 发表于 2019-11-27 15:11:50

PLM之家二次开发源码分享

lacconi · 发表于 2019-11-27 15:14:40

PLM之家二次开发源码分享

PLM之家PLMHome-工业软件践行者

热图推荐

[前端框架] 一个简单的登录和注册HTML CSS开发页面

admin 楼主

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！

全部回复2

lacconi 沙发

lacconi 板凳

发表回复