Html完成一個(gè)簡(jiǎn)單的登錄頁(yè)面

2020-03-24 18:15:47

字體：大中小

供稿：網(wǎng)友

這篇文章主要為大家詳細(xì)介紹了Html制作簡(jiǎn)單而漂亮的登錄頁(yè)面具體代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

先來(lái)看看樣子。

html源碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Login</title>      <link rel="stylesheet" type="text/css" href="Login.css"/>  </head>  <body>      <p 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>      </p>  </body>  </html>

css代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

html{       width: 100%;       height: 100%;       overflow: hidden;       font-style: sans-serif;   }   body{       width: 100%;       height: 100%;       font-family: 'Open Sans',sans-serif;       margin: 0;       background-color: #4A374A;   }   #login{       position: absolute;       top: 50%;       left:50%;       margin: -150px 0 0 -150px;       width: 300px;       height: 300px;   }   #login h1{       color: #fff;       text-shadow:0 0 10px;       letter-spacing: 1px;       text-align: center;   }   h1{       font-size: 2em;       margin: 0.67em 0;   }   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: 0;   }

總結(jié)：

代碼如下:

<input type="text" required="required" **placeholder="用戶名"** name="u"></input> <input type="password" required="required" **placeholder="密碼"** name="p"></input>

placeholder="用戶名"的作用:占位符