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>©xx Group 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
Implementierung der Formularübermittlung in HTML
Formularübermittlungscode 1. Quellcode-Analyse &l...
5 Gründe, warum sich Responsive Webdesign nicht lohnt
Dieser Artikel stammt aus Tom Ewers Managewp-Blog ...
Verwendung des Linux Dig-Befehls
Dig-Einführung: Dig ist ein Tool, das DNS einschl...
Zwei Methoden zum Deaktivieren von Formularsteuerelementen in HTML: schreibgeschützt und deaktiviert
Beim Erstellen von Webseiten verwenden wir häufig ...
So schreiben Sie mithilfe von Filtern transparentes CSS für Bilder
So schreiben Sie mithilfe von Filtern transparente...
Schnelles Verständnis und Beispielanwendung der Vuex-Zustandsmaschine
Inhaltsverzeichnis 1. Schnelles Verständnis von K...
Detaillierte Analyse der SQL-Ausführungsschritte
Detaillierte Analyse der SQL-Ausführungsschritte ...
Detaillierte Erläuterung der ActiveMQ-Bereitstellungsmethode in der Linux-Umgebung
Dieser Artikel beschreibt die Bereitstellungsmeth...
Änderung der Standardquelldatei sources.list des Ubuntu20.04 LTS-Systems
Wenn Sie den Inhalt der Datei „source.list“ verse...
Gründe und Lösungen für die Unfähigkeit, Array-Änderungen in Vue2 zu erkennen
Inhaltsverzeichnis Problemumgehung Warum kann ich...
So gehen Sie mit der Meldung „Vorgang nicht zulässig“ beim Löschen von Dateien in Linux um
Kollegen fragen oft, ob beim Löschen von Dateien/...
So verwenden Sie Maxwell zum Synchronisieren von MySQL-Daten in Echtzeit
Inhaltsverzeichnis Über Maxwell Konfiguration und...
Linux verwendet iptables, um den Zugriff mehrerer IPs auf Ihren Server zu beschränken
Vorwort Im Linux-Kernel ist Netfilter ein Subsyst...
Eine Codezeile zeigt Ihnen, wie Sie Linux-Prozesse verbergen
Freunde fragen mich immer, wie man Linux-Prozesse...
Tiefes Verständnis von Zeilenhöhe und vertikaler Ausrichtung
Mehrere Konzepte Zeilenbox: Eine Box, die eine In...