Maison > Article > interface Web > Créez une page de connexion simple et belle en HTML

Créez une page de connexion simple et belle en HTML

不言original: 2018-05-07 17:56:3312571parcourir

Cet article présente principalement en détail le code spécifique pour créer une page de connexion simple et belle en HTML. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Jetons un coup d'œil d'abord.

Code source HTML :

Code XML/HTMLCopier le contenu dans le presse-papiers

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

Code CSS :

Code CSSCopier le contenu dans le presse-papiers

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

Résumé :

Copier le code

Coder comme suit :

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

fonctions placeholder="username":Placeholder

Ce qui précède est le tout le contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

Comment insérer une vidéo en HTML et être compatible avec tous les navigateurs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment insérer une vidéo en HTML et être compatible avec tous les navigateursArticle suivant：Comment insérer une vidéo en HTML et être compatible avec tous les navigateurs

Articles Liés

Voir plus