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

Remplissez le contenu interne

      
  
 
 
博客,记录生活中的点点滴滴!
 
在博客中,可以畅所欲言,可以学习IT最新的知识！
 
 
 
 
忘记密码
 
 
  

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.

      
  
 
 
博客,记录生活中的点点滴滴!
 
在博客中,可以畅所欲言,可以学习IT最新的知识！
 
 
 
 
忘记密码
 
 
  

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

      
  
 
 
博客,记录生活中的点点滴滴!
 
在博客中,可以畅所欲言,可以学习IT最新的知识！
 
 
 
 
忘记密码
 
 
  

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

      
  
 
 
博客,记录生活中的点点滴滴!
 
在博客中,可以畅所欲言,可以学习IT最新的知识！
 
 
 
 
忘记密码
 
 
  

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.

      
  
 
 
博客,记录生活中的点点滴滴!
 
在博客中,可以畅所欲言,可以学习IT最新的知识！
 
 
 
 
忘记密码
 
 
  

Embellissement final de l'interface

.text{ width: 360px; margin: 0 auto; font-size: 15px; color: #666666; }

      
  
 
 
博客,记录生活中的点点滴滴!
 
在博客中,可以畅所欲言,可以学习IT最新的知识！
 
 
 
 
忘记密码
 
 
  

Apportez des ajustements mineurs au texte et la page de destination est terminée.