首頁 >web前端 >html教學 >一個用Html製作的漂亮登入頁面

一個用Html製作的漂亮登入頁面

零下一度
零下一度原創
2017-04-22 17:10:1022564瀏覽

這篇文章主要為大家詳細介紹了Html製作簡單而漂亮的登入頁面具體程式碼,具有一定的參考價值,有興趣的小夥伴們可以參考一下

先來看看樣子。

一個用Html製作的漂亮登入頁面

html原始碼:

  1. <!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複製內容到剪貼簿

  1. html{   
        width: 100%;   
        height: 100%;   
        overflow: hidden;   
        font-style: sans-serif;   
    }   
    body{   
        width: 100%;   
        height: 100%;   
        font-family: &#39;Open Sans&#39;,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;   
    }

總結:

程式碼如下:

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

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

一個用Html製作的漂亮登入頁面##

以上是一個用Html製作的漂亮登入頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn