Wie erreicht man den Drop-Cap-Effekt in CSS? Pseudoelement + Floating-Effekt (Codebeispiel)-CSS-Tutorial-php.cn

Wie erreicht man den Drop-Cap-Effekt in CSS? Pseudoelement + Floating-Effekt (Codebeispiel)

青灯夜游

Freigeben： 2019-07-06 11:35:08

Original

5227 Leute haben es durchsucht

In Word-Dokumenten gibt es eine Drop-Cap-Funktion, die beim Layout von Artikeln verwendet werden kann. Manchmal kann sie dem Artikel viel Farbe verleihen. Kann CSS also einen solchen Effekt erzielen? In diesem Artikel erfahren Sie, wie CSS den Drop-Cap-Effekt erzielt, damit Sie verstehen, wie Sie CSS-Pseudoelemente + Floating verwenden, um den Drop-Cap-Effekt zu erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

In CSS kann der Drop-Cap-Effekt durch das Pseudoelement::first-letter erreicht werden. Das Implementierungsprinzip ist sehr einfach: Setzen Sie den Schriftgrößenwert des ersten Zeichens auf einen größeren Wert und implementieren Sie ihn dann mit Float.

Anhand eines einfachen Codebeispiels sehen wir, wie CSS den Drop-Cap-Effekt erzielt.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首字下沉</title>
		<style>
			p::first-letter{
				color: #c69c6d;
				font-size: 2em;
				float:left;
				margin: 0 .2em 0 0;
			}
		</style>
	</head>
	<body>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
	</body>
</html>

Nach dem Login kopieren

Rendering:

Wie erreicht man den Drop-Cap-Effekt in CSS? Pseudoelement + Floating-Effekt (Codebeispiel)

Im obigen Beispiel wird die Initiale aller Absätze entfernt, wenn Sie nur den Initialeneffekt von a erzielen müssen bestimmter Absatz, der auch mit anderen Selektoren implementiert werden muss. Hier werfen wir einen Blick auf die Implementierung der Drop-Cap im ersten Absatz:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首字下沉</title>
		<style>
			p:first-child::first-letter{
				color: #c69c6d;
				font-size: 2em;
				float:left;
				margin: 0 .2em 0 0;
			}
		</style>
	</head>
	<body>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
	</body>
</html>

Nach dem Login kopieren

Rendering:

Wie erreicht man den Drop-Cap-Effekt in CSS? Pseudoelement + Floating-Effekt (Codebeispiel)

Zusammenfassung: Das Obige ist der gesamte Inhalt von Ich hoffe, dass dieser Artikel für das Studium aller hilfreich sein kann. Weitere verwandte Tutorials finden Sie unter Video-Tutorial zu CSS-Grundlagen !

Verwandte Empfehlungen:

PHP-Video-Tutorial zur öffentlichen Wohlfahrtsschulung

CSS-Online-Handbuch

Div/CSS-Grafik-Tutorial

Webdesign-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie erreicht man den Drop-Cap-Effekt in CSS? Pseudoelement + Floating-Effekt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!