HTML vervollständigt eine einfache Anmeldeseite-HTML-Tutorial-php.cn

HTML vervollständigt eine einfache Anmeldeseite

Y2J

Freigeben： 2017-05-24 09:17:53

Original

52847 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den spezifischen Code zum Erstellen einer einfachen und schönen Anmeldeseite in HTML vor. Er hat einen gewissen Referenzwert.

Werfen wir zunächst einen Blick darauf.

HTML-Quellcode:

XML/HTMLCode Inhalt in die Zwischenablage kopieren

<!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>

Nach dem Login kopieren

CSS-Code:

CSS-CodeInhalt kopieren In die Zwischenablage

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;   
}

Nach dem Login kopieren

Zusammenfassung:

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Die Rolle von placeholder="username ": Platzhalter

[Verwandte Empfehlungen]

1. Kostenloses HTML-Video-Tutorial

2. Detaillierte Erläuterung häufig verwendeter HTML-Tags in der Frontend-Entwicklung

3. Reiner HTML-Code, um einen Scroll-Effekt durch Marquee-Tags zu erzielen

Detaillierte Erläuterung des Beispiels von HTML mit Mailto zur Implementierung der E-Mail-Versandfunktion

5. Die Reihenfolge, in der der Browser lädt und rendert html

Das obige ist der detaillierte Inhalt vonHTML vervollständigt eine einfache Anmeldeseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!