Comment créer une page de connexion HTML simple (avec code)-tutoriel HTML-php.cn

Comment créer une page de connexion HTML simple (avec code)

yulia

Libérer： 2018-10-13 11:56:49

original

128814 Les gens l'ont consulté

Presque tous les sites Web ont une page de connexion, alors savez-vous comment écrire une page de connexion HTML ? Cet article partagera avec vous le code d'une simple interface de connexion HTML. Il a une certaine valeur de référence et les amis intéressés peuvent y jeter un œil.

De nombreux attributs CSS et balises HTML sont requis pour créer une page de connexion. Si vous n'êtes pas sûr, vous pouvez lire mes articles précédents, qui ont déjà été présentés, ou visiter le Tutoriel vidéo CSS. , Tutoriel vidéo HTML, ce sont les bases et doivent être maîtrisées.

Exemple : Créer une page de connexion HTML, comprenant l'e-mail, le mot de passe de connexion, inscrivez-vous maintenant, oublier le mot de passe, etc. Le code est le suivant :

Partie HTML :

<div class="dowebok">
         <div class="logo"></div>
         <div class="form-item">
             <input id="username" type="text" autocomplete="off" placeholder="邮箱">
         </div>
         <div class="form-item">
             <input id="password" type="password" autocomplete="off" placeholder="登录密码">
         </div>
         <div class="form-item"><button id="submit">登 录</button></div>
         <div class="reg-bar">
             <a class="reg" href="javascript:">立即注册</a>
             <a class="forget" href="javascript:">忘记密码</a>
         </div>
     </div>

Copier après la connexion

Partie CSS :

* { margin: 0; padding: 0; }
         html { height: 100%; }
         body { height: 100%; background: #fff url(img/backgroud.png) 50% 50% no-repeat; background-size: cover;}
         .dowebok { position: absolute; left: 50%; top: 50%; width: 430px; height: 550px; margin: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;}
         .logo { width: 104px; height: 104px; margin: 50px auto 80px; background: url(img/login.png) 0 0 no-repeat; }
         .form-item { position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}
         .form-item input { width: 288px; height: 48px; padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;}
         .form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff; }
         #username { background: url(img/emil.png) 20px 14px no-repeat; }
         #password { background: url(img/password.png) 23px 11px no-repeat; }
         .tip { display: none; position: absolute; left: 20px; top: 52px; font-size: 14px; color: #f50; }
         .reg-bar { width: 360px; margin: 20px auto 0; font-size: 14px; overflow: hidden;}
         .reg-bar a { color: #fff; text-decoration: none; }
         .reg-bar a:hover { text-decoration: underline; }
         .reg-bar .reg { float: left; }
         .reg-bar .forget { float: right; }
         .dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
         .dowebok :-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
         .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
         .dowebok :-ms-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
 
         @media screen and (max-width: 500px) {
             * { box-sizing: border-box; }
             .dowebok { position: static; width: auto; height: auto; margin: 0 30px; border: 0; border-radius: 0; }
             .logo { margin: 50px auto; }
             .form-item { width: auto; }
             .form-item input, .form-item button, .reg-bar { width: 100%; }
         }

Copier après la connexion

L'effet est comme indiqué sur l'image :

Comment créer une page de connexion HTML simple (avec code)

Le code de la page de connexion simple HTML est partagé ci-dessus, qui est souvent utilisé dans les projets, vous pouvez l'utiliser directement ou modifier le style que vous aimez. J'espère également que tout le monde l'essayera davantage et verra s'il peut écrire d'autres effets. J'espère que cet article vous sera utile. !

Pour plus de didacticiels connexes, veuillez visiter le tutoriel bootstrap, tutoriel vidéo HTML5

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!