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

React implementiert Endlosschleifen-Scrollinformationen

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

Detaillierte Erklärung des strikten Modus in JavaScript

Inhaltsverzeichnis Einführung Verwenden des strik...

MySQL 5.6.24 (binär) automatisches Installationsskript unter Linux

In diesem Artikel wird der Skriptcode für die aut...

Detaillierte Analyse des Unterschieds zwischen Ref und Reactive in Vue3.0

Inhaltsverzeichnis Ref und Reaktiv Referenz Reakt...

Zusammenfassung der Grundkenntnisse und Vorgänge der MySQL-Datenbank

Dieser Artikel erläutert anhand von Beispielen di...

Beheben Sie das Problem, dass die Alibaba Cloud SSH-Remoteverbindung nach kurzer Zeit getrennt wird

Reproduktion des Problems Alibaba Cloud Server, b...

HTML-Code zum Hinzufügen von Symbolen zum transparenten Eingabefeld

Ich habe vor Kurzem eine Website mit Anwaltsempfe...

Erstellen eines Redis-Clusters auf Docker

Inhaltsverzeichnis 1. Ziehen Sie das Bild 2. Erst...

Vue3+Skript-Setup+ts+Vite+Volar-Projekt

Inhaltsverzeichnis Erstellen Sie ein Vue + TS-Pro...

So erhöhen Sie die Ladegeschwindigkeit von HTML-Seiten

(1) Reduzieren Sie HTTP-Anfragen. (Ressourcendate...

Schreiben von qualitativ hochwertigem Code – Praxisbuchauszüge zur Web-Frontend-Entwicklung

(Teil 4) Webstandards bestehen aus einer Reihe von...

Einfaches Beispiel zum Hinzufügen und Entfernen von HTML-Knoten

<br />Einfaches Beispiel zum Hinzufügen und ...

Eine detaillierte Erklärung, wie React Fiber funktioniert

Inhaltsverzeichnis Was ist React Fiber? Warum Rea...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.23

Dieser Artikel zeichnet den detaillierten Install...

js zur Realisierung der Web-Message-Board-Funktion

In diesem Artikelbeispiel wird der spezifische JS...