Entwerfen Sie eine einfache HTML-Anmeldeoberfläche im CSS-Stil

Entwerfen Sie eine einfache HTML-Anmeldeoberfläche im CSS-Stil

login.html-Teil:

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <meta charset="utf-8">
        <Titel></Titel>
        <!--Schriftsymbolbibliothek vorstellen-->
        <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/login.css">
    </Kopf>
    <Text>

        <div Klasse="wrap">
            <h1>Backend-Verwaltungssystem für E-Commerce-Einkaufszentren</h1>
            <Formularaktion="">
                <div Klasse="Eingabegruppe">
                    //Das symbolähnliche Ding auf der linken Seite des Eingabefelds ist eine Schriftart. //Sie können die Datei font-awesome-4.7.0 aus dem Internet herunterladen und zur Verwendung direkt in das Projektverzeichnis einfügen <i class="icon-user fa fa-user"></i>
                    <input type="text" name="" class="form-control" placeholder="Bitte geben Sie Ihren Benutzernamen ein">
                </div>
                <div Klasse="Eingabegruppe">
                    <i class="icon-user fa fa-lock"></i>
                    <input type="password" name="" class="form-control" placeholder="Bitte geben Sie Ihr Passwort ein">
                </div>
                <div Klasse="Eingabegruppe btn-Gruppe">
                    <button>Anmelden</button>
                </div>
            </form>
            <p>&copy;xx Group&nbsp;Alle Rechte vorbehalten</p>
        </div>

    </body>
</html>

reset.css-Teil (Teil zurücksetzen)

*{
 Rand: 0;
 Polsterung: 0;
}
A{
 Schriftgröße: 12px;
 Textdekoration: 0;
 Farbe: Nr. 222;
}
A,
Eingang,
Taste{
 Gliederung: keine;
}
ul,ol,li{
 Listenstil: keiner;
}
h1,h2,h3,h4,h5,h6{
 Schriftstärke: 100;
}
img{
 Anzeige: Block;
 Rand: 0;
}

Informationen zum Zurücksetzen der Stildatei:

Da verschiedene Browser HTML-Tags unterschiedlich rendern, hat die geöffnete Seite immer einen Stil, auch wenn der Entwickler keine Zeile CSS-Code für die HTML-Seite schreibt. Die Standardstile verschiedener Browser unterscheiden sich jedoch geringfügig, was für Entwickler in gewissem Maße Probleme verursacht. Daher wird vor dem Schreiben des CSS-Codes normalerweise zuerst das Stylesheet zurückgesetzt, um die Stile der HTML-Elemente in allen Browsern zu vereinheitlichen. Front-End-Ingenieure vereinheitlichen die Stile durch benutzerdefinierte Stildateien und verbessern so die Kompatibilität der Front-End-Schnittstelle.

login.css-Teil

y{
 Hintergrund: rgba(0,0,0,0,8);
}
Körper{
    //Hintergrundbild für die Webseite festlegen background-image: url(../img/xx.jpg);
}
.wickeln{
    //Zentrieren Sie den Hauptteil der Benutzeroberfläche in der Browserposition: absolut; //Absolute Positionierung links: 50 %;
 oben: 50 %;
 Rand: -175px 0 0 -250px;
 Polsterung: 20px;
 Breite: 500px;
 Höhe: 350px;
 Hintergrund: #333333;
 Kastenschatten: 0 0 10px rgba (255,255,255,0,5);
 box-sizing: border-box; //Polsterung und Rahmen sind in der definierten Breite und Höhe enthalten}
h1{
 Höhe: 50px;
 Schriftgröße: 1,6em;
 Textausrichtung: zentriert;
 Rahmen unten: 1px durchgezogen rgba(255,255,255,0,5);
}
.Eingabegruppe{
 Rand: 20px automatisch;
 Höhe: 40px;
 Breite: 300px;
 Rand: 1px durchgezogen rgba(0,0,0,0,2);
}
ich{
 float: left; //linke Float-Breite: 40px;
 Höhe: 40px;
 Textausrichtung: zentriert;
 Zeilenhöhe: 40px !wichtig;
 Hintergrund: rgb(22,160,93);
 Farbe: #fff;
 Schriftgröße: 22px !wichtig;
 
}
.form-control{
 schweben: links;
 Polsterung: 0 10px;
 Höhe: 40px;
 Rand: 0;
 Breite: 260px;
 Schriftgröße: 18px;
 Box-Größe: Rahmenbox;
}
.btn-Gruppe{
 Rand: 0;
 Rand oben: 40px;
}
Taste{
 Anzeige: Block;
 Breite: 100 %;
 Höhe: 40px;
 Schriftgröße: 1,2em;
 Buchstabenabstand: 10px;
 Rand: 1px durchgezogen rgb(22,160,93);
 Farbe: rgb(22,160,93);
 Hintergrund: #fff;
 Cursor: Zeiger;
}
Schaltfläche: schweben {
    //Legen Sie die dynamische Effektfarbe beim Mouseover für Schaltflächenelemente fest: #fff;
 Hintergrund: rgb(22,160,93);
}
P{
 Schriftgröße: 12px;
 Textausrichtung: zentriert;
 Farbe: #888;
}

Die Auswirkung des Designs auf den Browser:

Dies ist das Ende dieses Artikels über die Verwendung von CSS-Stilen zum Entwerfen einer einfachen HTML-Anmeldeoberfläche. Weitere relevante Inhalte zur CSS-HTML-Anmeldeoberfläche finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Eine kurze Diskussion über die Definition und Vorsichtsmaßnahmen von H-Tags

>>:  So zeigen Sie den Prozentsatz und die ersten paar Prozent in MySQL an

Artikel empfehlen

Detaillierte Erklärung der Fallstricke bei der Aufzeichnung von lower_case_table_names in MySQL

1 Ursache Nachdem das Projekt die Datenbank migri...

Detaillierte Erläuterung zur Verwendung von Nginx + Consul + Upsync zum Erreichen eines dynamischen Lastausgleichs

Inhaltsverzeichnis Voraussetzungen DNS-Domänennam...

React realisiert den gesamten Prozess des Seitenwasserzeicheneffekts

Inhaltsverzeichnis Vorwort 1. Anwendungsbeispiele...

Grundlegende Verwendung von UNION und UNION ALL in MySQL

In der Datenbank führen sowohl die Schlüsselwörte...

Anweisungen zur Verwendung von MySQL-Indizes (einspaltiger Index und mehrspaltiger Index)

1. Einspaltiger Index Die Auswahl der Spalten, fü...

Detaillierte Erklärung zur Installation von mysql5.7.16 aus dem Quellcode in der Centos7-Umgebung

Dieser Artikel beschreibt, wie mysql5.7.16 aus de...

Ein gründliches Verständnis des JS-nativen Syntaxprototyps, des __proto__ und des Konstruktors

Inhaltsverzeichnis 1 Einleitung 2 Voraussetzungen...

CSS-Code zum Erreichen eines Hintergrundverlaufs und automatischen Vollbilds

CSS-Probleme mit dem Hintergrundverlauf und dem a...

Ein negativer oberer Randwert löst das Problem der vertikalen Zentrierung zwischen Beschriftungstext und Eingabe

Es ist nicht einfach, die vertikale Zentrierung vo...

Zusammenfassung der für die Front-End-Entwicklung erforderlichen allgemeinen Toolfunktionen

1. Zeitformatierung und andere Methoden Es wird e...

HTML-Cellpadding- und Cellspacing-Attribute in Bildern erklärt

Zelle -- der Inhalt der Tabelle Zellenrand (Tabell...

Zusammenfassung von Beispielen gängiger Methoden von JavaScript-Arrays

Inhaltsverzeichnis Gängige Array-Methoden concat(...

Einfache Analyse von EffectList in React

Inhaltsverzeichnis EffectList-Sammlung Effektlist...

Vue implementiert Funktionen zum Hinzufügen, Löschen und Ändern des lokalen Speichers

In diesem Artikelbeispiel wird der spezifische Co...

Webdesign-Kenntnisse: Hohe Rankingprobleme bei gemischten chinesischen und englischen Webseiten

<br />Ich werde mit diesem Problem im Grunde...