Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So rücken Sie die erste CSS-Zeile ein

藏色散人
Freigeben: 2023-01-03 09:26:01
Original
19090 Leute haben es durchsucht

So legen Sie die Einrückung der ersten CSS-Zeile fest: Erstellen Sie zuerst eine neue HTML-Codedatei, legen Sie dann eine Klasse für

fest und legen Sie dann die Breite der Inhaltsklasse auf 400 Pixel fest Die erste Zeile des p-Tags wird einfach um zwei Zeichen eingerückt.

So rücken Sie die erste CSS-Zeile ein

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Erstellen Sie eine neue HTML-Codedatei, erstellen Sie dann ein

und legen Sie eine Klasse für dieses
fest. Erstellen Sie dann mehrere

Inhalt als

. Wie im Bild gezeigt:

Code:

<div class="cont">
<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>
<p>的顶顶顶顶顶的顶顶顶顶顶</p>
<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>
</div>
Nach dem Login kopieren

So rücken Sie die erste CSS-Zeile ein

Legen Sie den Stil fest. Erstellen Sie nach dem einen neuen <style>, legen Sie die Breite der Inhaltsklasse auf 400 Pixel fest und legen Sie dann den Einzug der ersten Zeile des p-Tags fest. Wie im Bild gezeigt: </p><p>Empfohlen: „<a href="https://www.php.cn/course/list/12.html" target="_blank">CSS-Video-Tutorial</a>“</p><p>Code: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><style> .cont{ width:400px; } .cont p{ text-indent: 2em; } </style></pre><div class="contentsignin">Nach dem Login kopieren</div></div><p><img src="https://img.php.cn/upload/image/623/356/755/1614479678378976.png" title="1614479678378976.png" alt="So rücken Sie die erste CSS-Zeile ein"/></p><p>Öffnen Sie es mit einem Browser und Sie können den Effekt der ersten Einrückungszeile sehen. Wie im Bild gezeigt: </p><p><img src="https://img.php.cn/upload/image/242/185/179/1614479684867032.png" title="1614479684867032.png" alt="So rücken Sie die erste CSS-Zeile ein"/></p><p>alle Codes. Kopieren Sie den gesamten Code direkt und fügen Sie ihn in die neue HTML-Datei ein. Öffnen Sie sie nach dem Speichern mit einem Browser, um alle Effekte zu sehen. </p><p>Code: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首行缩进 <style> .cont{ width:400px; } .cont p{ text-indent: 2em; } </style> <div class="cont"> <p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p> <p>的顶顶顶顶顶的顶顶顶顶顶</p> <p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p> </div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo rücken Sie die erste CSS-Zeile ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage