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

Automatisches Failover von Slave-Knoten in der Replikationsarchitektur in MySQL 8.0.23

Ich stehe seit einiger Zeit mit MGR in Kontakt. M...

Analysieren Sie das Auswahlproblem beim Speichern von Zeit- und Datumstypen in MySQL

In allgemeinen Anwendungen verwenden wir die Type...

Detaillierte Erläuterung der Vorteile von PNG in verschiedenen Netzwerkbildformaten

BMP ist ein von Hardwaregeräten unabhängiges und ...

Detailliertes Beispiel für sharedWorker in JavaScript zur Realisierung einer mehrseitigen Kommunikation

Folgendes ist passiert. Heute habe ich mit GitHub...

Windows verhindert, dass der Remote-Desktop für längere Zeit automatisch getrennt wird

Jeder, der schon einmal Windows Remote Desktop zu...

Verwenden von Openlayer in Vue, um einen Ladeanimationseffekt zu realisieren

Hinweis: Sie können keine bereichsbezogenen Anima...

Lösung für das Problem „VMware-virtuelle Maschine ohne Netzwerk“

Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...

LinkedIn wird überarbeitet, um das Surfen auf der Website zu vereinfachen

Das geschäftliche Social-Networking-Portal Linked...

Implementierung der CSS-Rahmenlängensteuerungsfunktion

Wenn die Rahmenlänge früher kleiner als der Conta...

Webdesign-Erfahrung: Effizientes Schreiben von Webcode

Ursprünglich sollte dieses siebte Kapitel eine aus...

JavaScript zur Implementierung des Flugzeugkriegsspiels

In diesem Artikel erfahren Sie, wie Sie mit Canva...

Einrichten eines Docker-Proxys unter CentOS 7 (Konfiguration der Umgebungsvariablen des Systemd-Dienstes unter Linux)

Der Docker-Daemon verwendet HTTP_PROXY , HTTPS_PR...

11 Linux-KDE-Anwendungen, die Sie nicht kannten

KDE Abkürzung für Kool Desktop Environment. Eine ...

So erstellen Sie Benutzer und verwalten Berechtigungen in MySQL

1. So erstellen Sie einen Benutzer und ein Passwo...

So verwenden Sie MySQL Binlog zum Wiederherstellen versehentlich gelöschter Datenbanken

Inhaltsverzeichnis 1 Aktuellen Datenbankinhalt ei...