Conception de la page de connexion du blog de développement HTML
Conception de la page de connexion
Terminons d'abord la conception de la page de connexion
Créons d'abord une nouvelle dans le dossier du répertoire du site, et y créer un nouveau fichier html, et le fichier css
Ici, afin que tout le monde puisse y voir plus clair, nous utilisons la feuille de style interne pour écrire du CSS, vous pouvez importer des fichiers CSS localement pour écrire, et la lecture et l'écriture seront plus claires.
fichier login.html
Créer un fichier
en html Créez un nouveau div et ajoutez la balise <p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录</title> </head> <body> <div> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </body> </html>
Remplissez le contenu interne
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录</title> <link href="login.css" rel="stylesheet" type="text/css"> </head> <body> <div> <p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p> <p >博客,记录生活中的点点滴滴!</p> <p >在博客中,可以畅所欲言,可以学习IT最新的知识！</p> <p><input type="text" ></p> <p><input type="password" ></p> <p><input type="submit" value="确认登陆" ></p> <p >忘记密码</p> <p ><input type="button" value="注册账号"></p> </div> </body> </html>
et ajoutez des images, du texte, des formulaires de compte et de mot de passe, ainsi que des boutons de connexion et d'inscription dans l'ordre.
Embellissement du style
Définissez d'abord la taille du corps et ajustez la taille de l'image pour rendre la mise en page raisonnable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
#login{
width: 1000px;
margin: 0 auto;
}
#login p{
text-align:center;
}
</style>
</head>
<body>
<div id="login">
<p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
<p >博客,记录生活中的点点滴滴!</p>
<p >在博客中,可以畅所欲言,可以学习IT最新的知识！</p>
<p><input type="text" ></p>
<p><input type="password" ></p>
<p><input type="submit" value="确认登陆" ></p>
<p >忘记密码</p>
<p ><input type="button" value="注册账号"></p>
</div>
</body>
</html>Ajoutez un sélecteur d'identifiant au div, ajustez-le, définissez la largeur et la hauteur, définissez la bordure sur automatique, masquez le débordement et centrez le texte.
Ajuster le style du texte
Ajouter de nouveaux sélecteurs de classe t1 et t2
.t1{
font-size: 28px;font-family:"微软雅黑";
}
.t2{
font-size: 15px;font-family:"微软雅黑";
color: #999999;
} Ajustez la taille et la couleur du texte
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
#login{
width: 1000px;
margin: 0 auto;
overflow:hidden;
}
#login p{
text-align:center;
}
.t1{
font-size: 28px;font-family:"微软雅黑";
}
.t2{
font-size: 15px;font-family:"微软雅黑";
color: #999999;
}
</style>
</head>
<body>
<div id="login">
<p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
<p class="t1">博客,记录生活中的点点滴滴!</p>
<p class="t2">在博客中,可以畅所欲言,可以学习IT最新的知识！</p>
<p><input type="text" ></p>
<p><input type="password" ></p>
<p><input type="submit" value="确认登陆" ></p>
<p >忘记密码</p>
<p ><input type="button" value="注册账号"></p>
</div>
</body>
</html>Embellissez la zone de mot de passe du compte
.textbox{
width: 350px;
height: 40px;
border-radius: 3px;
border: 1px solid #e2b709;
padding-left: 10px;
}
.submit{
width: 360px;
height: 40px;
background-color: #F0184d;
border-radius: 3px;
color: white;
border: 1px solid #666666;
}Limitez la hauteur et la largeur, et définissez coins arrondis, la couleur de la bordure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
#login{
width: 1000px;
margin: 0 auto;
overflow:hidden;
}
#login p{
text-align:center;
}
.t1{
font-size: 28px;font-family:"微软雅黑";
}
.t2{
font-size: 15px;font-family:"微软雅黑";
color: #999999;
}
.textbox{
width: 350px;
height: 40px;
border-radius: 3px;
border: 1px solid #e2b709;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="login">
<p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
<p class="t1">博客,记录生活中的点点滴滴!</p>
<p class="t2">在博客中,可以畅所欲言,可以学习IT最新的知识！</p>
<p><input type="text" class="textbox"></p>
<p><input type="password" class="textbox"></p>
<p><input type="submit" value="确认登陆" ></p>
<p >忘记密码</p>
<p ><input type="button" value="注册账号"></p>
</div>
</body>
</html>Confirmer la connexion et enregistrer le compte pour embellir
.submit{
width: 365px;
height: 40px;
background-color: #F0184d;
color: white;
border: 1px solid #666666;
}
.button{
width: 365px;
height: 40px;
padding-left: 10px;
background-color: white;
border: 1px solid #666666;
}Définir soumettre et bouton, ajuster hauteur couleur taille de police.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
#login{
width: 1000px;
margin: 0 auto;
overflow:hidden;
}
#login p{
text-align:center;
}
.t1{
font-size: 28px;font-family:"微软雅黑";
}
.t2{
font-size: 15px;font-family:"微软雅黑";
color: #999999;
}
.textbox{
width: 350px;
height: 40px;
border-radius: 3px;
border: 1px solid #e2b709;
padding-left: 10px;
}
.submit{
width: 365px;
height: 40px;
background-color: #F0184d;
color: white;
border: 1px solid #666666;
}
.button{
width: 365px;
height: 40px;
padding-left: 10px;
background-color: white;
border: 1px solid #666666;
}
</style>
</head>
<body>
<div id="login">
<p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
<p class="t1">博客,记录生活中的点点滴滴!</p>
<p class="t2">在博客中,可以畅所欲言,可以学习IT最新的知识！</p>
<p><input type="text" class="textbox"></p>
<p><input type="password" class="textbox"></p>
<p><input type="submit" value="确认登陆" class="submit"></p>
<p >忘记密码</p>
<p ><input type="button" value="注册账号" class="button"></p>
</div>
</body>
</html>Embellissement final de l'interface
.text{
width: 360px;
margin: 0 auto;
font-size: 15px;
color: #666666;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
#login{
width: 1000px;
margin: 0 auto;
overflow:hidden;
}
#login p{
text-align:center;
}
.t1{
font-size: 28px;font-family:"微软雅黑";
}
.t2{
font-size: 15px;font-family:"微软雅黑";
color: #999999;
}
.textbox{
width: 350px;
height: 40px;
border-radius: 3px;
border: 1px solid #e2b709;
padding-left: 10px;
}
.submit{
width: 365px;
height: 40px;
background-color: #F0184d;
color: white;
border: 1px solid #666666;
}
.button{
width: 365px;
height: 40px;
padding-left: 10px;
background-color: white;
border: 1px solid #666666;
}
.text{
width: 360px;
margin: 0 auto;
font-size: 15px;
color: #666666;
}
</style>
</head>
<body>
<div id="login">
<p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
<p class="t1">博客,记录生活中的点点滴滴!</p>
<p class="t2">在博客中,可以畅所欲言,可以学习IT最新的知识！</p>
<p><input type="text" class="textbox"></p>
<p><input type="password" class="textbox"></p>
<p><input type="submit" value="确认登陆" class="submit"></p>
<p class="text"style="text-align: right;">忘记密码</p>
<p ><input type="button" value="注册账号" class="button"></p>
</div>
</body>
</html>Apportez des ajustements mineurs au texte et la page de destination est terminée.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
