Maison >interface Web >tutoriel HTML >HTML complète une simple page de connexion
HTML complète une simple page de connexion
- Y2Joriginal
- 2017-05-24 09:17:5352849parcourir
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 :
XML/HTMLCode Copier 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 Vers le presse-papier
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;
}Résumé :
Le code est le suivant :
<input type="text" required="required" **placeholder="用户名"** name="u"></input> <input type="password" required="required" **placeholder="密码"** name="p"></input>
Le rôle de placeholder=" username": Placeholder
[Recommandations associées]
1. Tutoriel vidéo gratuit HTML
2. Explication détaillée des balises HTML couramment utilisées dans le développement front-end
3 Code HTML pur pour obtenir un effet de défilement via la balise de sélection.
L'ordre dans lequel le navigateur se charge et. rend le HTML
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!