Der Inhalt dieses Artikels besteht darin, vorzustellen, wie man einen Einladungsbrief in HTML5 erstellt. So erstellen Sie eine Einladung (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Zweck: Dieses einfache Einladungsschreiben dient lediglich dazu, Anfängern den Einstieg in die Webentwicklung zu ermöglichen.
Bevor wir die Seite erstellen, werfen wir einen Blick auf das Gesamterscheinungsbild der gesamten Einladung.
1. Schreiben Sie zuerst den HTML-Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邀请函</title> </head> <body> <div id="container"> <h1>hello world</h1> <p>欢迎来到虚拟世界,在这里发挥你的想象力,探索无限的可能。</p> <a href="#" id="button">点击进入</a> </div> </body> </html>
Anleitung:
< ; !doctype html>: Dies hat die Form einer Dokumentdeklaration.
-Tag: steht für den Anfang von HTML, steht für das Ende von HTML.
-Tag: Es enthält eine Beschreibung verschiedener Attribute und Konfigurationsinformationen der HTML5-Seite. Daher kann er gewissermaßen als „Personalausweis“ angesehen werden.Tag: Dies stellt einen Absatz dar.
2. Verschönern Sie die Seite: CSS
1. Fügen Sie der Seite ein Hintergrundbild hinzu:
html,body{ height: 100%; }body { background: url(images/1.jpg) center center; background-size: cover; }
Wir sind Hinzufügen eines Hintergrundbilds zur Seite Beim Hinzufügen eines Hintergrundbilds hat das von uns ausgewählte Hintergrundbild möglicherweise relativ große Pixel und passt möglicherweise nicht in unser Browserfenster. Daher zentrieren wir das Hintergrundattribut des Körpers sowohl in horizontaler als auch in vertikaler Richtung Der Browser verfügt standardmäßig nicht über das Höhenattribut, daher muss das Attribut height: 100 % auf den Körper und das übergeordnete Element des Körpers (HTML) festgelegt werden. Legen Sie das Attribut „background-size: cover“ auf dem Körper fest, um zu realisieren, dass das Hintergrundbild den gesamten Bildschirm adaptiv ausfüllt.
2. Schriftstil zur Webseite hinzufügen
html,body{ height: 100%; font-family: sans-serif; color: #801449; }
font-family: Attribut kann die Schriftart ändern.
Farbe: Sie können die Farbe der Schriftart ändern. Da CSS über einen Vererbungsmechanismus verfügt, verfügen nachfolgende Elemente über dieses Attribut.
3. Passen Sie die Position des Einladungsinhaltsbereichs an.
body { background: url(images/1.jpg) center center; background-size: cover; margin: 0; padding: 0; position: relative; }#container { width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); }
Zunächst verwenden wir margin: 0;padding: 0; Dies ist eine sehr gängige Praxis. Dadurch können einige vom Browser voreingestellte Randwerte für Seitenelemente gelöscht werden, wodurch die CSS-unabhängigere Steuerung verbessert wird präzise.
Hier verwenden wir den ID-Selektor (#+ID-Name) und setzen seine Breite auf 100 %; verwenden Sie text-ailgn:center, um den Text horizontal zu zentrieren.
Wie erreicht man also vertikales Spiel? Hier wird die Positionierung verwendet: Wir müssen das obere Attribut des Containers steuern, das auf der absoluten Positionierung basieren muss. Um den Container absolut zu positionieren, muss sein übergeordnetes Element (Körper) auf relative Positionierung eingestellt werden. Dann verwenden wir das Attribut, um die Spitze 50 % von der Spitze entfernt zu machen.
Es ist noch nicht vorbei, wir können das Transformationsattribut von HTML5 verwenden, um TranslateY(-50%) festzulegen, das heißt, es um die Hälfte seiner Höhe nach oben zu verschieben.
Auf diese Weise wird der gesamte Container in der Mitte der Seite angezeigt.
4. Legen Sie einige Schriftarten und -größen für die Inhaltsbeschriftungen fest.
h1 { font-size: 54px; text-transform: uppercase; margin-bottom: 20px; }p { font-size: 21px; margin-bottom: 40px; }a { font-size: 18px; color: #8f3c3c; }
Beschreibung:
Schriftgröße: Legen Sie die Schriftgröße fest.
text-transform:uppercase: Text in Großbuchstaben umwandeln.
margin-bottom:20px: Hierbei handelt es sich um das Box-Modell, was bedeutet, dass der untere Rand eine Breite von 20 Pixel hat.
5. Erstellen Sie eine Einladungsschaltfläche.
a { font-size: 18px; color: #8f3c3c; border: 1px solid #c66c6c; border-radius: 3px; padding: 10px 100px; text-decoration: none; }
Rahmen: Legen Sie den Rahmen dafür fest. Die drei Parameter dieses Attributs stellen die Rahmenbreite von 1 Pixel, die durchgezogene Linie bzw. die Farbe dar.
border-radius: Legt eine abgerundete 3-Pixel-Ecke für den Rand fest.
Polsterung: Obere und untere Polsterung beträgt 10 Pixel; linke und rechte Polsterung beträgt 100 Pixel.
text-decoration:none: Dadurch wird die Unterstreichung des Links entfernt.
Gesamt-CSS-Datei:
html,body{ height: 100%; font-family: sans-serif; color: #801449; } body { background: url(images/1.jpg) center center; background-size: cover; margin: 0; padding: 0; position: relative; } #container { width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); } h1 { font-size: 54px; text-transform: uppercase; margin-bottom: 20px; } p { font-size: 21px; margin-bottom: 40px; } a { font-size: 18px; color: #8f3c3c; border: 1px solid #c66c6c; border-radius: 3px; padding: 10px 100px; text-decoration: none; }
3. Interaktion für die Seite erstellen
var btn = document.getElementById('button'); btn.onclick = function(e) { //preventDefault() 可以阻止单机链接后浏览器默认的URL跳转。 e.preventDefault(); btn.innerHTML = "正在进入..." btn.style.border = "0"; }
e.preventDefault(); //将阻止其默认的链接跳转。 btn.innerHTML = "正在进入..." //改变文本内容。 btn.style.border = "0";
Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Einladungsschreiben in HTML5? So erstellen Sie einen Einladungsbrief (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!