So erstellen Sie eine einfache HTML-Anmeldeseite (mit Code)

Fast jede Website hat eine Anmeldeseite. Wissen Sie also, wie man eine HTML-Anmeldeseite schreibt? In diesem Artikel wird der Code einer einfachen HTML-Anmeldeschnittstelle mitgeteilt. Er hat einen gewissen Referenzwert und interessierte Freunde können einen Blick darauf werfen.

Viele CSS-Attribute und HTML-Tags sind erforderlich, um eine Anmeldeseite zu erstellen. Wenn Sie sich nicht sicher sind, können Sie meine vorherigen Artikel lesen, die bereits vorgestellt wurden, oder das CSS-Video-Tutorial besuchen , HTML-Video-Tutorial, das sind die Grundlagen und müssen beherrscht werden.

Beispiel: Erstellen Sie eine HTML-Anmeldeseite, einschließlich E-Mail, Anmeldepasswort, registrieren Sie sich jetzt, Passwort vergessen usw. Der Code lautet wie folgt:

HTML-Teil:

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

CSS-Teil:

* { 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%; }
         }

Der Effekt ist wie im Bild gezeigt:

Der Code für die einfache HTML-Anmeldeseite wird oben geteilt wird im Projekt häufiger verwendet und kann direkt verwendet oder geändert werden. Ich hoffe, Sie können sie häufiger ausprobieren, um zu sehen, ob Sie andere Effekte erzielen können !

Weitere verwandte Tutorials finden Sie unter Bootstrap-Tutorial, Html5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine einfache HTML-Anmeldeseite (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!