Realisieren Sie die Anmelde- und Registrierungsschnittstelle (1haodian)

Anmeldebildschirm

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           * {                margin: 0;                Polsterung: 0;            }

.all { Höhe: 600px; Breite: 1100px; Rand: automatisch; Rand: 1px #DCDCDC fest; }

.s { Breite: 300px; Höhe: 20px; schweben rechts; Rand oben: 6px; }

.header { Breite: 1100px; Höhe: 100px; Hintergrundfarbe: rgb(255, 255, 255); Schriftgröße: 12px; Rand: automatisch; Rand: 1px #DCDCDC fest; }

.a { display: inline-block; Breite: 130px; Höhe: 20px;

}

.nei { display: inline-block; Breite: 85px; Höhe: 20px; Rand: 1px #DCDCDC fest; }

.header>img {

               Rand links: 30px;
               Rand oben: 10px;
               vertikal ausrichten: Mitte;
           }

.nei>img { Vertical-align: middle; }

.header a {

Textdekoration: keine;
}

.Rechts {

               Breite: 396px;
               Höhe: 400px;
               schweben rechts;
           }

.righter { width: 350px; Höhe: 300px; Rand oben: 50px; }

.left { width: 700px; Höhe: 400px; schweben: links; }

.left img { margin-left: 120px; Rand oben: 20px; }

.middle { Breite: 1100px; Höhe: 400px; Hintergrundfarbe: rgb(252, 252, 252); }

.right span { margin-left: 40px; Schriftdicke: fett; Farbe: RGB(102, 102, 102); }

.right a { text-decoration: none; Rand links: 145px; Schriftgröße: 12px; }

.eine Eingabe {

               Rand links: 40px;
               Hintergrundfarbe: #FFFFFF;
               Hintergrund: url(Image/icon_02.gif) no-repeat 20px 20px;
               Hintergrundposition: 20px;
               Höhe: 50px;
               Breite: 300px;
               Rand: #DCDCDC fest 1px;
           }

.two input { margin-top: 15px; Rand links: 40px; Hintergrundfarbe: #FFFFFF; Hintergrund: URL(Image/lock.png) no-repeat 20px 20px; Hintergrundposition: 23px; Höhe: 50px; Breite: 300px; Rand: #DCDCDC fest 1px; }

.drei Eingabe { margin-top: 20px; Rand links: 40px;

}

.drei span { color: rgb(118, 118, 122); }

.drei { Schriftgröße: 13px; Farbe: RGB(118, 118, 122); }

.four input { margin-top: 15px; Rand links: 40px; Höhe: 50px; Breite: 300px; Randradius: 3px; Hintergrundfarbe: rgb(255, 60, 60); Schriftgröße: 16px; Farbe weiß; Rand: 0px; }

.fünf p { margin-top: 15px; Rand links: 40px; Schriftgröße: 12px; Farbe: RGB(118, 118, 122); }

.right input::-webkit-input-placeholder {

               Schriftgröße: 16px;
               Farbe: RGB(118, 118, 122);
           }

.six img { margin-top: 15px; Rand links: 20px; Breite: 30px; Höhe: 30px; vertikal ausrichten: Mitte; }

.six span img { margin-left: 15px; }

.six span { margin-left: 25px; Schriftgröße: 12px; Farbe: RGB(118, 118, 122); }

.eight img { width: 12px; Höhe: 12px; vertikal ausrichten: Mitte; Rand links: 0; }

           .footer {                width: 1100px;                Höhe: 100px;                Hintergrundfarbe: #FCFCFC;                Schriftgröße: 12px;                Farbe: #000000;                Textausrichtung: Mitte;                Zeilenhöhe: 15px;            }        </style>    </head>    <body>        <div class="all">            <div class="header"><img src="Image/loginlogo.

                       <img src="./Image/runbun.png">Hilfecenter<img src="./Image/turnb.png"> </div> </div> </div>
                   <
               div
           class
           ="middle">
               <div class="left"><img src="Image/loadimg.jpg"></div>
               <div class="right">
                   <div class="righter">
                       <form action="#" method=" get">
                           <span>1haodian Benutzeranmeldung</span><a href="Registrierungsseite.html" target="_blank">Weitere Informationen</a><br />
                           <div class="one"><input type="text" name="username"
                                   placeholder="                邮箱/手机/用户名"><br /> </
                           div >
                           <div class="two"><input type="password" name="password"
                                   placeholder="                 密码">
                           </div>
                           <div class="two"><input type="checkbox"
                                   value="Automatische Anmeldung">Automatische Anmeldung<span>                                             &n bsp; Passwort vergessen? </span>
                           </div>
                           <div class="four"><input type="submit" value="login"></div>
                           <div class="fünf">
                               <p>Kooperativere Website-Kontoanmeldung < /p>
                           </div> <a

                                   <div class="eight"><img src="./Image/turnb.png"></span></div> </form> </div> </div>
                       </div>
                   <
               div
           class
           = "Fußzeile"><br />Shanghai ICP Nr. 13044728 | Co-Wort B1.B2-20130004 | Geschäftslizenz<br /><br />
               Copyright© Yihaodian Online Supermarket 2007-2016, Alle Rechte vorbehalten
           </div>
       < /div>
   </body>
</html>

Registrierungsschnittstelle

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .all {                height: 680px;                Breite: 1300px;                Rand: automatisch;            }

.s { Breite: 300px; Höhe: 20px; schweben rechts; Rand oben: 5px; }

.header { Breite: 1300px; Höhe: 100px; Hintergrundfarbe: rgb(255, 255, 255); Schriftgröße: 12px; Rand: automatisch; Rand: 1px #DCDCDC fest; }

.a { display: inline-block; Breite: 130px; Höhe: 20px; }

.nei { display: inline-block; Breite: 85px; Höhe: 20px; Rand: 1px #DCDCDC fest; }

.header>img {

               Rand links: 30px;
               Rand oben: 10px;
               vertikal ausrichten: Mitte;
           }

.nei>img { Vertical-align: middle; }

.header a,
.ca { text-decoration: none; }

.footer { Höhe: 580px; Breite: 1300px; Hintergrundfarbe: rgb(252, 252, 252); }

.main { width: 400px; Höhe: 550px; Rand links: 450px; Hintergrundfarbe: rgb(252, 252, 252); }

.main input { width: 360px; Höhe: 60px; Rand oben: 10px; }

.a2 Eingabe { Breite: 200px; Höhe: 60px; schweben: links; }

.a3 Eingabe { Breite: 150px; Höhe: 66px; schweben: links; Rand links: 10px; Schriftgröße: 16px; Farbe weiß; Hintergrundfarbe: rgb(87, 86, 95); Rand: 0; Schriftdicke: fett; }

.b Eingabe { Breite: 360px; Höhe: 60px; Rand oben: 10px; }

.c { margin-top: 15px; padding-left: 30px; }

.d Eingabe { Farbe: weiß; Hintergrundfarbe: rgb(255, 60, 60); Rand: 0; Schriftgröße: 18px; }

.e { Schriftgröße: 14px; Textausrichtung: Mitte; }

.z { padding-top: 20px; Rand unten: 10px; Schriftgröße: 25px; Textausrichtung: Mitte; }

           .main input::-webkit-input-placeholder {                padding-left: 20px;                Schriftgröße: 16px;                Schriftdicke: fett;                Farbe: RGB(118, 118, 122);            }        </style>    </head>    <body>        <div class="all">            <div class="header">                <img src="Image/loginlogo.

                   </div>
               </div>
           </div>
           <div class="footer">
               <div class="main">
                   <form action="#" method="get">
                       <div class="z">1手机号</div>
                       <input type="text" placeholder="手机号">
                       <div class="a1">
                           <div class="a2"><input type="text" placeholder="手机号" ></div>
                           <div class="a3"><input type="button"value="Bestätigungscode abrufen"></div>
                       </div>
                       <div class="b"><input type="text" placeholder="password"></div>
                       <input type="text" placeholder="passwort bestätigen">
                       <div class="c">Klicken Sie hier, um sich zu registrieren. Sie stimmen der <a href="#">"Servicevereinbarung"</a></div > von Yihaodian zu
                       <div class="d"><input type="submit" value="Der Vereinbarung zustimmen und registrieren"></div>
                       <div class="e"><br />Shanghai ICP Nr. 13044728 | Co- Wort B1 .B2-20130004 | Geschäftslizenz<br /><br />
                           Copyright© Yihaodian Online Supermarket 2007-2016, Alle Rechte vorbehalten</div>
                   </form>
               </div>
           </div>
       </div>
   < /body>
</html>

Realisieren Sie die Anmelde- und Registrierungsschnittstelle (1haodian)

Supongo que te gusta