简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich ein Einladungsschreiben in HTML5? So erstellen Sie einen Einladungsbrief (Codebeispiel)

Wie erstelle ich ein Einladungsschreiben in HTML5? So erstellen Sie einen Einladungsbrief (Codebeispiel)

青灯夜游
青灯夜游nach vorne
2018-10-26 17:06:0110353Durchsuche

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.

100db36a723c770d327fc0aef2ce13b1-Tag: steht für den Anfang von HTML, 73a6ac4ed44ffec12cee46588e518a5e steht für das Ende von HTML.

93f0f5c25f18dab9d176bd4f6de5d30e-Tag: Es enthält eine Beschreibung verschiedener Attribute und Konfigurationsinformationen der HTML5-Seite. Daher kann er gewissermaßen als „Personalausweis“ angesehen werden.

0b06b01d593eb6158ab14a0c0e15c90d-Tag: Verwenden Sie den Zeichensatz des 0b06b01d593eb6158ab14a0c0e15c90d-Tags und geben Sie seine Zeichenkodierung als UTF-8 an, eine universelle Kodierungsform, die auch als „ “ bezeichnet wird. Universeller Code".

b2386ffb911b14667cb8f0f91ea547a7 Tag: Der Titel der Seite, der in der Menüleiste des Browsers angezeigt wird.

6c04bd5ca3fcae76e30b72ad730ca86d Tag: Enthält alle Inhaltsinformationen, die dem Betrachter präsentiert werden sollen.

dc6dce4a544fdca2df29d5ac0ea9906b Tag: Dies ist ein allgemeines Element auf Blockebene, das einem Container entspricht. Es wird häufig für das Div+CSS-Layout verwendet. Hier verwenden wir es, um die Position der Seite anzupassen.

4a249f0d628e2318394fd9b75b4636b1 Tag: Dies ist ein Titel, er hat sechs Stufen von 1 bis 6.

e388a4556c0f65e1904146cc1a846bee Tag: Dies stellt einen Absatz dar.

3499910bf9dac5ae3c52d5ede7383485 Tag: Dies ist ein Link.

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";
}
Zuerst fügen wir die Schaltfläche „id as“ zum Link 3499910bf9dac5ae3c52d5ede7383485 hinzu.

Verwenden Sie document.getElementById(id name), um einen Link abzurufen und ihn der Variablen btn zuzuweisen.

Fügen Sie dann das eigenständige Attribut zu btn hinzu und rufen Sie die Ausführungsfunktion auf. 

 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!

Stellungnahme：
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie implementiert man ein einfaches Parkour-Spiel? (Detaillierte Code-Erklärung)Nächster Artikel：Wie implementiert man ein einfaches Parkour-Spiel? (Detaillierte Code-Erklärung)

In Verbindung stehende Artikel

Mehr sehen