HTML erstellt eine einfache und schöne Anmeldeseite

HTML erstellt eine einfache und schöne Anmeldeseite

Schauen wir uns das zunächst einmal an.

HTML Quelltext:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2. < html   lang = "en" >   
  3. <Kopf>​​   
  4.      < Meta   Zeichensatz = "UTF-8" >   
  5.      <Titel> Anmelden </Titel>​​​​   
  6.      < Link   rel = "Stilvorlage"   Typ = "Text/CSS"   href = "Login.css" />   
  7. </ Kopf >   
  8. < Textkörper >   
  9.      < div   id = "Anmelden" >   
  10.          < h1 > Anmelden </ h1 >   
  11.          < Formular   Methode = "posten" >   
  12.              < Eingabe   Typ = "Text"   erforderlich = "erforderlich"   Platzhalter = "Benutzername"   Name = "u" > </ Eingabe >   
  13.              < Eingabe   Typ = "Passwort"   erforderlich = "erforderlich"   Platzhalter = "Passwort"   Name = "p" > </ Eingabe >   
  14.              < Schaltfläche   Klasse = "aber"   Typ = "Senden" > Anmelden </ button >   
  15.          </ form >   
  16.      </div>​​   
  17. </ Körper >   
  18. </ html >   

CSS Code:

CSS- CodeInhalt in die Zwischenablage kopieren
  1. html{
  2.      Breite : 100 %;
  3.      Höhe : 100 %;
  4.      Überlauf : versteckt ;
  5.      Schriftstil : serifenlos ;
  6. }
  7. Körper{
  8.      Breite : 100 %;
  9.      Höhe : 100 %;
  10.      Schriftfamilie : „Open Sans“ , serifenlos ;
  11.      Rand : 0;
  12.      Hintergrundfarbe : #4A374A ;
  13. }
  14. #Anmeldung {
  15.      Position : absolut ;
  16.      oben : 50 %;
  17.      links : 50 %;
  18.      Rand : - 150px 0 0 - 150px ;
  19.      Breite : 300px ;
  20.      Höhe : 300px ;
  21. }
  22. #Anmeldung h1{
  23.      Farbe : #fff ;
  24.      Textschatten : 0 0 10px ;
  25.      Buchstabenabstand : 1px ;
  26.      Textausrichtung : zentriert ;
  27. }
  28. h1{
  29.      Schriftgröße : 2em;
  30.      Rand : 0,67em 0;
  31. }
  32. Eingang{
  33.      Breite : 278px ;
  34.      Höhe : 18px ;
  35.      Rand unten : 10px ;
  36.      Umriss : keiner ;
  37.      Polsterung : 10px ;
  38.      Schriftgröße : 13px ;
  39.      Farbe : #fff ;
  40.      Textschatten : 1px   1 Pixel   1px ;
  41.      Rahmen oben : 1px   solide   #312E3D ;
  42.      Rahmen links : 1px   solide   #312E3D ;
  43.      Rahmen rechts : 1px   solide   #312E3D ;
  44.      Rahmen unten : 1px   solide   #56536A ;
  45.      Rahmen - Radius: 4px ;
  46.      Hintergrundfarbe : #2D2D3F ;
  47. }
  48. .Aber{
  49.      Breite : 300px ;
  50.      Mindesthöhe : 20px ;
  51.      Anzeige : Block ;
  52.      Hintergrundfarbe : #4a77d4 ;
  53.      Rand : 1px   solide   #3762bc ;
  54.      Farbe : #fff ;
  55.      Polsterung : 9px   14px ;
  56.      Schriftgröße : 15px ;
  57.      Zeilenhöhe : normal ;
  58.      Rahmen - Radius: 5px ;
  59.      Rand : 0;
  60. }

Zusammenfassen:

Code kopieren
Der Code lautet wie folgt:
<input type="text" required="erforderlich" **Platzhalter="Benutzername"** name="u"></input>
<input type="Passwort" required="erforderlich" **Platzhalter="Passwort"** name="p"></input>

Die Rolle von placeholder="Benutzername": placeholder

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein.

<<:  Detaillierte Schritte zur Installation von Nginx unter Linux

>>:  So finden Sie langsame MySQL-Abfragen

Artikel empfehlen

Detaillierte Erläuterung des Prozesses der Verwendung von GPU in Docker

Inhaltsverzeichnis tf-gpu herunterladen Erstellen...

Paketieren, Zusammenführen und Komprimieren von Vue-Projekten zur Optimierung der Reaktionsgeschwindigkeit von Webseiten

Inhaltsverzeichnis Vorwort 1. Der Anforderungsinh...

Referenz zur Webseitenerstellung im IE6 - Standardstil im IE6

Dies ist eigentlich kein offizielles Dokument des ...

Detaillierte Erläuterung des Implementierungsprozesses und der Verwendung des Linux-Papierkorbmechanismus

Vorwort: rm unter Linux-Systemen ist irreversibel...

Mit Mailto ist das Senden von E-Mails im HTML-Format ganz einfach

Kürzlich habe ich dem Footer-Postfach des Kunden e...

JavaScript-Datenvisualisierung: ECharts-Kartenerstellung

Inhaltsverzeichnis Überblick Vorsichtsmaßnahmen 1...

Das Erlebnis gestalten: Was auf dem Knopf liegt

<br />Vor Kurzem hat UCDChina eine Artikelse...

Webentwickler sind besorgt über die Koexistenz von IE7 und IE8

Ich habe heute IE8 installiert. Als ich auf die M...

Lösung für das Datenasymmetrieproblem zwischen MySQL und Elasticsearch

Lösung für das Datenasymmetrieproblem zwischen My...

js implementiert das Ein- und Ausblenden von Inhalten mit der Maus über die Karte

In diesem Artikel wird der spezifische Code von j...

Beispielcode für die Batchbereitstellung von Nginx mit Ansible

1.1 Kopieren Sie das Nginx-Installationspaket und...

Eine kurze Diskussion über MySql-Ansichten, Trigger und gespeicherte Prozeduren

Sicht Was ist eine Ansicht? Welche Rolle spielt e...

Verwendung und Beschreibung des HTML-Tags tbody

Das Tbody-Element sollte in Verbindung mit den Ele...

Vorteile und Probleme des XHTML CSS Website Designs

XHTML ist die derzeit international verbreitete S...

IDEA-vollständiger Code zum Herstellen einer Verbindung mit einer MySQL-Datenbank und Durchführen von Abfragevorgängen

1. Schreiben Sie zuerst eine Mysql-Link-Einstellu...