Html制作简单而漂亮的登录页面

开发者智营技术 2022年11月6日

0 收藏 589 点赞 648 浏览 1229 个字

先来看看样子。

html源码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Login</title>
     <link rel="stylesheet" type="text/css" href="Login.css" rel="external nofollow" />
 </head>
 <body>
     <div id="login">
         <h1>Login</h1>
         <form method="post">
             <input type="text" required="required" placeholder="用户名" name="u"></input>
             <input type="password" required="required" placeholder="密码" name="p"></input>
             <button class="but" type="submit">登录</button>
         </form>
     </div>
 </body>
 </html>

css代码：

 html{
     width: %;
     height: %;
     overflow: hidden;
     font-style: sans-serif;
 }
 body{
     width: %;
     height: %;
     font-family: 'Open Sans',sans-serif;
     margin: ;
     background-color: #4A374A;
 }
 #login{
     position: absolute;
     top: %;
     left:%;
     margin: -150px   -150px;
     width: 300px;
     height: 300px;
 }
 #login h1{
     color: #fff;
     text-shadow:  10px;
     letter-spacing: 1px;
     text-align: center;
 }
 h1{
     font-size: 2em;
     margin: .67em ;
 }
 input{
     width: 278px;
     height: 18px;
     margin-bottom: 10px;
     outline: none;
     padding: 10px;
     font-size: 13px;
     color: #fff;
     text-shadow:1px 1px 1px;
     border-top: 1px solid #312E3D;
     border-left: 1px solid #312E3D;
     border-right: 1px solid #312E3D;
     border-bottom: 1px solid #56536A;
     border-radius: 4px;
     background-color: #2D2D3F;
 }
 .but{
     width: 300px;
     min-height: 20px;
     display: block;
     background-color: #4a77d4;
     border: 1px solid #3762bc;
     color: #fff;
     padding: 9px 14px;
     font-size: 15px;
     line-height: normal;
     border-radius: 5px;
     margin: ;
 }