Lassen Sie mich Ihnen zuerst die Renderings zeigen. Wenn Sie das Gefühl haben, dass es ziemlich gut ist, finden Sie weiterhin die Implementierungsideen für eine detaillierte Erklärung.
Layout
1. Hälfte von jedem links und rechts (Col-MD-6)
2. Das linke Anmeldefeld macht die Hälfte der linken Seite aus
3. rechts sind die Vorsichtsmaßnahmen für die Anmeldung im System
HTML -Elemente verwendet
Also
Eingabegruppe
Taste (BTN-SUCCESS)
HTML -Code
<div style = "margin-top: 30px;"> <div style = "Border-Light: 1px Solid #ddd;"> <div> <H3> Benutzeranmeldung </h3> <div> <span id = "Dimension-addon1"> <i ark-versteckt = "True"> </i> </span> <Eingabe type "text ARIA-DESCRECTBY = "Größen-addon1"> </div> <div> <span id = "Größen-Addon1"> <i> </i> </span> <Eingabe type = "Passwort" Platzhalter = "Passwort" Kennwort "ARIA-DESCHREIBTE MENTIGE". Lehrer <Eingabe type = "radio" name = "sort" value = "stu"> student </div> <button type = "subieren"> login </button> </div> <div> <h3> Willkommen, das studentische Hausaufgabenmanagementsystem zu verwenden. Bitte ändern Sie das Kennwort rechtzeitig nach dem Anmelden. Der Lehrer. Verwenden Sie bitte die Arbeitsnummer </em>, um sich anzumelden. Das anfängliche Passwort ist <em> 6 1 </em>. Bitte ändern Sie das Kennwort rechtzeitig nach dem Anmelden. </Li> </ul> </div> </div>
CSS -Code
.Input-Gruppen {Margin: 10px 0px; // Die oberen und unteren Ränder des Eingangsbox sind 10px und die linke und rechte sind 0px} H3 {Padding: 5px; Border-Bottom: 1px Solid #ddd; // H3-Schriftrandgrenze} li {{List-Stil-Type: Das Listen-Typen: 20-. und untere Ränder sind 10px} em {// Die betonte Stilfarbe: #C7254E; Schriftstil: Erbe; Hintergrundfarbe: #f9f2f4;}Das obige ist das, was der Editor Ihnen zur Implementierung der Benutzeroberfläche der Benutzeranmeldung verwendet hat. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!