HTML+CSS网页制作：一个简易美观的登录页面实例代码

效果：

我们可以将以下代码。复制粘贴到菜鸟教程或者其他可以在线运行代码的网站。就可以在线调试预览代码了：
菜鸟教程在线编辑器https://www.runoob/try/try.php?filename=tryhtml_intro
代码：

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

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>User Login</title>
   <meta name="description" content="User login">
   <meta name="keywords" content="login,user,musayazlik">
   <meta name="author" content="Musa Yazlık">
   <link rel="stylesheet" href="css/style.css">
   <!-- Google Fonts -->
   <link href="https://fonts.googleapis/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet">
	<style>
		* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "poppins";
  letter-spacing: 0.5px;
}

.column {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

body {
  background: linear-gradient(147deg, #8c54e9 0%, #4b76e7 74%);
  min-height: 100vh;
  width: 100%;
}

#cart-section {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#cart-section .container {
  max-width: 1140px;
  margin: 0 auto;
}

#cart-section .container .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#cart-section .container .row .cart {
  width: 310px;
  height: 550px;
  background-color: #210f4d;
  margin: 10px;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#cart-section .container .row .cart::before {
  content: " ";
  height: 50px;
  width: 50px;
  background-image: linear-gradient(220deg, #3e27ed 50%, #703dd0 80%);
  position: absolute;
  border-radius: 100px;
}

#cart-section .container .row .cart1 .top-area {
  width: 100%;
  z-index: 1;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin-top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#cart-section .container .row .cart1 p {
  font-size: 11px;
  color: white;
  font-family: poppins;
  font-weight: 200;
}

#cart-section .container .row .cart1 .start-your {
  width: 100%;
  height: 300px;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -30px;
}

#cart-section .container .row .cart1 .start-your p {
  font-size: 40px;
  margin: -5px 0 -5px 40px;
  font-family: "poppins semibold";
  text-align: start;
}

#cart-section .container .row .cart1 .button-area {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 240px;
}

#cart-section .container .row .cart1 .button-area button {
  margin-top: 20px;
  padding: 13px 40px;
  border-radius: 100px;
  font-size: 20px;
  font-family: "poppins";
  background: linear-gradient(100deg, #3e27ed 50%, #703dd0 80%);
  border: none;
  color: white;
  font-weight: 300;
}

#cart-section .container .row .cart1 .button-area .account-area {
  margin-top: 5px;
}

#cart-section .container .row .cart1 .button-area .account-area a {
  color: #703dd0;
  text-decoration: none;
}

#cart-section .container .row .cart2 .top-area {
  width: 100%;
  z-index: 1;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin-top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#cart-section .container .row .cart2 p {
  font-size: 11px;
  color: white;
  font-family: poppins;
  font-weight: 200;
}

#cart-section .container .row .cart2 .log-in-area {
  width: 100%;
  height: 400px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#cart-section .container .row .cart2 .log-in-area label {
  width: 60%;
  margin-top: 20px;
  color: white;
  font-weight: 200;
  font-size: 15px;
  letter-spacing: 1px;
}

#cart-section .container .row .cart2 .log-in-area label input {
  border: none;
  background: transparent;
  border-bottom: 2px solid white;
  color: white;
  font-weight: 100;
}

#cart-section .container .row .cart2 .log-in-area label input:focus {
  outline: none;
}

#cart-section .container .row .cart2 h2 {
  margin-top: 40px;
  font-size: 38px;
  font-family: "poppins";
  font-weight: 700;
  color: white;
  margin-bottom: 20px;
}

#cart-section .container .row .cart2 .button-area {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 240px;
}

#cart-section .container .row .cart2 .button-area button {
  margin-top: 20px;
  padding: 10px 45px;
  border-radius: 100px;
  font-size: 20px;
  font-family: "poppins";
  background: linear-gradient(100deg, #3e27ed 50%, #703dd0 80%);
  border: none;
  color: white;
  font-weight: 300;
}

#cart-section .container .row .cart2 .button-area .account-area {
  margin-top: 5px;
}

#cart-section .container .row .cart2 .button-area .account-area a {
  color: #703dd0;
  text-decoration: none;
}

#cart-section .container .row .cart3 .top-area {
  width: 100%;
  z-index: 1;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin-top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#cart-section .container .row .cart3 p {
  font-size: 11px;
  color: white;
  font-family: poppins;
  font-weight: 200;
}

#cart-section .container .row .cart3 .log-in-area {
  width: 100%;
  height: 400px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#cart-section .container .row .cart3 .log-in-area label {
  width: 60%;
  margin-top: 20px;
  color: white;
  font-weight: 200;
  font-size: 15px;
  letter-spacing: 1px;
}

#cart-section .container .row .cart3 .log-in-area label input {
  border: none;
  background: transparent;
  border-bottom: 2px solid white;
  color: white;
  font-weight: 100;
}

#cart-section .container .row .cart3 .log-in-area label input:focus {
  outline: none;
}

#cart-section .container .row .cart3 h2 {
  width: 100%;
  margin-top: 40px;
  font-size: 38px;
  font-family: "poppins";
  font-weight: 700;
  color: white;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#cart-section .container .row .cart3 h2 span {
  margin: -10px 0 0 60px;
}

#cart-section .container .row .cart3 .button-area {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 240px;
}

#cart-section .container .row .cart3 .button-area button {
  margin-top: 20px;
  padding: 10px 45px;
  border-radius: 100px;
  font-size: 20px;
  font-family: "poppins";
  background: linear-gradient(100deg, #3e27ed 50%, #703dd0 80%);
  border: none;
  color: white;
  font-weight: 300;
}

#cart-section .container .row .cart3 .button-area .account-area {
  margin-top: 5px;
}

#cart-section .container .row .cart3 .button-area .account-area a {
  color: #703dd0;
  text-decoration: none;
}

#cart-section .container .row .cart1::before {
  -webkit-transform: scale(10);
          transform: scale(10);
  top: 60px;
}

#cart-section .container .row .cart2 {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  margin: 0 40px;
}

#cart-section .container .row .cart2::before {
  -webkit-transform: scale(10);
          transform: scale(10);
  top: 110px;
}

#cart-section .container .row .cart3::before {
  -webkit-transform: scale(10);
          transform: scale(10);
  top: 120px;
}

@media screen and (max-width: 1100px) {
  #cart-section {
    min-height: 100vh;
  }
  #cart-section .container .row {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #cart-section .container .row .cart {
    margin: 40px 20px;
  }
  #cart-section .container .row .cart2 {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  #cart-section .container .row .cart2.column.top-area {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
  #cart-section .container .row .cart3 {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  #cart-section .container .row .cart3.column.top-area {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
  #cart-section .container .row .cart3.column.top-area {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
}
/*# sourceMappingURL=style.css.map */
	</style>
</head>

<body>

   <section id="cart-section">
      <div class="container">
         <div class="row">
            <div class="cart cart1">
               <div style="z-index: 1;" class="column">
                  <div class="top-area ">
                     <p>about us</p>
                     <p>terms & conditions</p>
                     <p>security</p>
                  </div>
                  <div class="start-your">
                     <p>Start</p>
                     <p>your day</p>
                     <p>now</p>
                  </div>
                  <div class="button-area column"><button>Sign Up</button>
                     <div class="account-area">
                        <p>Have account? <a href="#">Log in here</a></p>
                     </div>
                  </div>

               </div>
            </div>
            <div class="cart cart2">
               <div style="z-index: 1;" class="column">
                  <div class="top-area ">
                     <p>about us</p>
                     <p>terms & conditions</p>
                     <p>security</p>
                  </div>
                  <div class="log-in-area column">
                     <h2>Log in</h2>
                     <label class="column" for=""> USER NAME
                        <input type="text" value="">
                     </label>
                     <label class="column" for=""> PASSWORD
                        <input type="password" value="">
                     </label>

                  </div>
                  <div class="button-area column"><button>Log in</button>
                     <div class="account-area">
                        <p>Don't have account? <a href="#">Sign up here</a></p>
                     </div>
                  </div>

               </div>
            </div>
            <div class="cart cart3">
               <div style="z-index: 1;" class="column">
                  <div class="top-area ">
                     <p>about us</p>
                     <p>terms & conditions</p>
                     <p>security</p>
                  </div>
                  <div class="log-in-area column">
                     <h2><span>New</span><span>account</span></h2>
                     <label class="column" for="">FULL NAME
                        <input type="text" value="Naomi Gerhold">
                     </label>
                     <label class="column" for=""> USER NAME
                        <input type="text" value="naomigerhold">
                     </label>

                  </div>
                  <div class="button-area column"><button>Log in</button>
                     <div class="account-area">
                        <p>Have account?<a href="#"> Log in here</a></p>
                     </div>
                  </div>

               </div>
            </div>
         </div>
      </div>
   </section>
</body>
</html>
更多推荐
HTML+CSS网页制作：一个简易美观的登录页面实例代码