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

编程语言 2022-06-24 17:06:24 阅读次数: 0

效果：

 我们可以将以下代码。复制粘贴到菜鸟教程或者其他可以在线运行代码的网站。就可以在线调试预览代码了：

菜鸟教程在线编辑器https://www.runoob.com/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.com/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>

扫描二维码关注公众号，回复： 14318147 查看本文章

猜你喜欢

转载自blog.csdn.net/qq_22182989/article/details/125449340
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022