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

Das Prinzip und die Anwendung der ES6-Dekonstruktionszuweisung

Inhaltsverzeichnis Array-Destrukturierungszuweisu...

Detaillierte Beschreibung des MySQL-Ersetzens in der Verwendung

Die Ersetzungsanweisung ähnelt im Allgemeinen der...

MySQL count: ausführliche Erklärung und Funktionsbeispielcode

Detaillierte Erklärung der MySQL-Anzahl Die Funkt...

So exportieren Sie eine CSV-Datei mit Header in MySQL

Siehe das offizielle Dokument http://dev.mysql.co...

Neues CSS3-Layout: ausführliche Flex-Erklärung

Flex-Grundkonzepte Flex-Layout (Flex ist die Abkü...

So implementieren Sie die zentrierte Ausrichtung einer CSS-Maske im Vollbildmodus

Der spezifische Code lautet wie folgt: <Stil&g...

Tutorial zu HTML-Tabellen-Tags (3): Breiten- und Höhenattribute WIDTH, HEIGHT

Standardmäßig werden Breite und Höhe der Tabelle ...

Sehen Sie sich den Befehl zum Ändern der MySQL-Tabellenstruktur an

Kurzbeschreibung Der Editor hat häufig Probleme m...

JavaScript implementiert einen verschiebbaren Fortschrittsbalken

In diesem Artikel wird der spezifische JavaScript...

Natives JS-objektorientiertes Tippspiel

In diesem Artikel wird der spezifische Code des o...

Fehlerbehebung bei den von Alibaba Cloud hinzugefügten Sicherheitsgruppen-Ports und der Unfähigkeit, nach dem Hinzufügen auf sie zuzugreifen

Zweck: 1. Um das externe Netzwerk des Servers übe...

Drei Möglichkeiten zum Konfigurieren einer JNDI-Datenquelle in Tomcat

In meiner früheren Arbeit war der Entwicklungsser...

5 häufig verwendete Objekte in JavaScript

Inhaltsverzeichnis 1. JavaScript-Objekte 1).Array...

Detaillierte Diskussion zum Thema mysqldump-Datenexport

1. Bei der Verwendung von mysqldump wird ein Fehl...

Saubere XHTML-Syntax

Das Schreiben von XHTML erfordert eine saubere HTM...