html登录界面代码UI

最新推荐文章于 2024-07-25 11:52:08 发布

置顶彙罚官方账号

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量1.3k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_71456883/article/details/130397805

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           * {
           margin: 0;
           padding: 0;
           }
           html {
           height: 100%;
           }
           body {
           height: 100%;
           }
           .container {
           height: 100%;
           background-image: linear-gradient(to right, #fbc2e1, #a6c1e1);
           }
           .login-wrapper{
               background-color: #fff;
               width:358px;
               height:588px;
               border-radius: 15px;
               padding:0 50px;
               position:relative;
               left:50%;
               top:50%;
               transform:translate(-50%,-50%);
           }
           .header{
               font-size:38px;
               font-weight:bold;
               text-align:center;
               line-height:200px;
           }
           .input-item{
               display:block;
               width:100%;
               margin-bottom:20px;
               border:0;
               padding:10px;
               border-bottom:1px solid rgb(128,125,125);
               font-size:15px;
               outline:none;
           }

           .btn{
               padding:10px;
               text-align:center;
               margin-top:40px;
               background-image:linear-gradient(to right, #fbc2e1, #a6c1e1);
               color:#fff;
           }
           .msg{
               text-align:center;
               line-align:88px;
           }
           a{
               text-decoration-line:none;
               color:#abc1ee;
           }
       </style>
   </head>
   <body>
       <div class="container">
           <div class="login-wrapper">
               <div class="header">登录</div>
               <div class="form-wrapper">
                   <input type="text" name="username" placeholder="用户名" class="input-item">
                   <input type="password" name="password" placeholder="密码" class="input-item">
                   <div class="btn">登录</div>
               </div>
               <div class="msg">
                   无账号？
                   <a href="#">注册</a>
           </div>
       </div>
   </body>
</html>