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
Entwicklungsdetails von Vue3-Komponenten
Inhaltsverzeichnis 1. Einleitung 2. Komponentenen...
Ausführliche Erläuterung der Auswirkungen von NULL auf Indizes in MySQL
Vorwort Ich habe viele Blogs gelesen und von viel...
Verwenden von Zabbix zum Überwachen des Ogg-Prozesses (Windows-Plattform)
Dieser Artikel stellt vor, wie man das Ogg-Progra...
Detaillierte Zusammenfassung von MySQL und verbindungsbezogenen Timeouts
MySQL und verbindungsbezogene Timeouts Vorwort: H...
Implementierungsbeispiel für eine einfache Vue-Registrierungsseite + Funktion zum Senden eines Bestätigungscodes
Inhaltsverzeichnis 1. Effektanzeige 2. Verbessert...
Erstellen Sie Schritt für Schritt ein Dateiverwaltungssystem mit nginx+FastDFS
Inhaltsverzeichnis 1. Einführung in FastDFS 1. Ei...
Verwendung des Linux-Befehls „userdel“
1. Befehlseinführung Der Befehl userdel (User Del...
Lösung für das Problem, dass Docker CMD/ENTRYPOINT das sh-Skript ausführt: nicht gefunden/run.sh:
Es gibt kein Problem mit der Dockerfile-Konfigura...
WeChat-Applet-Canvas implementiert Signaturfunktion
Im WeChat-Applet-Projekt umfasst das Entwicklungs...
Detaillierte Erklärung zur Verwendung von MySQL, wobei
Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...
Was genau passiert im Hintergrund, wenn Sie eine URL eingeben?
Als Softwareentwickler müssen Sie über ein vollst...
Implementierung der Nginx-Konfiguration https
Inhaltsverzeichnis 1: Bereiten Sie das https-Zert...
Problemlösungsvorgänge für Alpine Docker-Bildschriftarten
1. Führen Sie Schriftarten aus, öffnen Sie den Sc...
Unterscheidung zwischen Linux-Hardlinks und Softlinks
Unter Linux gibt es zwei Arten von Dateiverbindun...
Detaillierte Erläuterung der erweiterten Konstruktionseigenschaften von Vue
Inhaltsverzeichnis 1. Richtlinie Zollrichtlinie 2...