CSS-Beispielcode zum Zeichnen eines Lutschers
|
Hintergrund: Machen Sie jeden Tag ein wenig Fortschritte, sammeln Sie ein wenig mehr, und Sie werden immer besser Code:
<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<Titel>Lutscher</Titel>
<h3>Zeichnen Sie einen Lutscher mit CSS</h3>
<p>Voraussetzungen:</p>
<p>1: Der Text in der Mitte des Lollis ist horizontal zentriert</p>
<p>2: Nicht weniger als drei Farbschichten</p>
<Stil>
.runden{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: #e5e7e9;
Position: relativ;
Textausrichtung: zentriert;
Rand: 100px;
Schriftart: kursiv fett 17px/100px Arial, serifenlos;
Kastenschatten:
0 0 0 10px #4286b4,
0 0 0 20px #fc052e,
0 0 0 30px #FBDD00,
0 0 0 40px #00BDFB;
Rahmenradius: 200px;
Farbe: #ffffff;
}
.bangbang{
Breite: 20px;
Höhe: 150px;
Rand: -80px 0px 0px 142px;
Hintergrundfarbe: #00BDFB;
Rahmenradius: 10px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="runde">
Hallo Welt!
</div>
<div Klasse="bangbang"></div>
</body>
</html>Effektbild:
Heute gewonnene Erkenntnisse: 1:Über die Abkürzung der Schriftart Schriftstil: kursiv; Schriftvariante: Kapitälchen; Schriftstärke: fett; Schriftgröße: 12px; Zeilenhöhe: 1,5em; Schriftfamilie: Arial, Verdana; kann wie folgt geschrieben werden: Schriftart: kursiv fett 17px/100px Arial, serifenlos; 17px steht für: Schriftgröße Was Sie bei der Verwendung von Abkürzungen beachten sollten: 1:Schriftgröße und Zeilenhöhe können nur als ein Wert mit Schrägstrich / geschrieben werden und sind nicht getrennt voneinander möglich. 2: Die Reihenfolge kann nicht geändert werden. Diese Kurzform funktioniert nur, wenn die Attribute „font-size“ und „font-family“ gleichzeitig angegeben werden. Auch wenn Sie Schriftstärke, Schriftstil und Schriftvariante nicht festlegen, werden Standardwerte verwendet. 2: Über die Zentrierung Am einfachsten ist es, die Texthöhe auf die gleiche Höhe wie die Div-Höhe zu setzen und dann text-align:center festzulegen. Wenn Sie keine Schriftart festlegen, legen Sie line-height:100px fest. Dadurch können Sie den Text auch zentrieren. 3: Über die Grenze Ich verwende das Attribut „box-shadow“, das auf mehrere Werte eingestellt werden kann. Es ist für mein aktuelles Szenario besser geeignet. Wenn der Wert zwei oder eine Ebene erfordert, können Sie den Rahmen oder zwei Div-Verschachtelungs- oder Umrissattribute direkt einstellen. Zusammenfassen Oben sehen Sie den vom Herausgeber eingeführten Beispielcode zum Zeichnen eines Lutschers in CSS. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Gestaltung der Bildvorschau auf der Inhaltswebseite
>>: Zusammenfassung der DTD-Verwendung in HTML
Artikel empfehlen
Native Netzwerkanforderungsschema von Vue und Netzwerkanforderungsbibliothek von JS
1. Native Netzwerkanforderung 1. XMLHttpRequest (...
MySQL verwendet ein Limit, um die Beispielmethode für Paging zu implementieren
1. Grundlegende Implementierung des Limits Im All...
Einführung in die MySQL-Gesamtarchitektur
Die Gesamtarchitektur von MySQL ist in die Server...
Implementierung von LNMP für die separate Bereitstellung von Docker-Containern
1. Umweltvorbereitung Die IP-Adresse jedes Contai...
Gründe und Lösungen für die Aufforderung zum Speichern der Aktion nach dem Hochladen von Dateien im Formular
Die JSON-Daten müssen im HTML-Format zurückgegeben...
Detaillierte Erläuterung der Live-Übertragungsfunktion von Vue
Vor kurzem hat das Unternehmen zufällig Live-Über...
Beherrschen Sie einfach die Verwendung horizontaler Zeilenanmerkungen und Codekommentare in HTML
Horizontale Linie Verwenden Sie das Tag <hr /&...
Verwendung des Array-Filters filter() in JS
Inhaltsverzeichnis 1. Einleitung 2. Einführung in...
JavaScript zur Implementierung eines einfachen Karusselldiagramms, umfassendste Codeanalyse (ES5)
In diesem Artikel wird der spezifische Code für J...
Entwurf und Implementierung eines Supermarkt-Warenwirtschaftssystems auf Basis von Mysql+JavaSwing
Inhaltsverzeichnis 1. Funktionseinführung 2. Schl...
So verwenden Sie webSocket zum Aktualisieren des Echtzeitwetters in Vue
Inhaltsverzeichnis Vorwort Informationen zu WebSo...
Führen Sie die Schritte zum Aktivieren der GZIP-Komprimierung in Nginx aus.
Inhaltsverzeichnis Vorwort 1. Konfigurieren Sie d...
Detaillierte Erklärung der .bash_profile-Datei im Linux-System
Inhaltsverzeichnis 1. Umgebungsvariable $PATH: 2....
So testen Sie die maximale Anzahl von TCP-Verbindungen in Linux
Vorwort Es besteht ein Missverständnis bezüglich ...
React verwendet Emotionen zum Schreiben von CSS-Code
Inhaltsverzeichnis Einführung: Installation von E...