CSS-Tipps

Wir müssen uns noch einige klassische CSS-Techniken merken, die uns viel Zeit sparen können. Nachfolgend empfiehlt Zero ein paar bessere CSS-Techniken für alle:

1. Verwenden Sie Gleicher Navigationscode auf verschiedenen Seiten

Viele Webseiten verfügen über Navigationsmenüs. Beim Aufrufen einer bestimmten Seite sollte das entsprechende Element im Menü grau werden, während andere Seiten aufleuchten sollten. Um diesen Effekt zu erzielen, müssen Sie im Allgemeinen ein Programm oder Design speziell für jede Seite schreiben. Jetzt können Sie diesen Effekt mit CSS erzielen.

Verwenden Sie zunächst die CSS-Klasse im Navigationscode:

<ul> 
<li><a href="#" class="home">首页</a></li> 
<li><a href="#" class="about">关于我们</a></li> 
<li><a href="#" class="contact">联系我们</a></li> 
</ul>

Dann für jede Seite separat Body Gibt eine ID mit demselben Namen wie die obige Klasse an. Zum Beispiel 69aab999a64e75a9d5e7b7109fdc5db9.

Dann entwerfen Sie das CSS wie folgt:

#home .home, #about .about, #contact .contact 
{ 
commands for highlighted navigation go here 
}

Hier, wenn die ID auf „home“ eingestellt ist, .home funktioniert, das heißt, in der Zeile der Navigationsleisten mit der auf „home“ eingestellten Klasse werden Spezialeffekte angezeigt. Das Gleiche gilt auch für andere Seiten.

Wie wäre es, wenn es nicht ganz einfach wäre?

2. Vergleich von Block- und Inline-Elementen

Alle HTML-Elemente gehören zu einem von Block- und Inline-Elementen. Die Eigenschaften des Blockelements sind:

beginnt immer in einer neuen Zeile;

Höhe, Zeilenhöhe sowie oberer und unterer Rand können alle gesteuert werden.

Die Standardbreite beträgt 100 % seines Containers, sofern keine Breite festgelegt ist.

e388a4556c0f65e1904146cc1a846bee, 4a249f0d628e2318394fd9b75b4636b1, ff9c23ada1bcecdd1a0fb5d5a0f18437, ff6d136ddc5fdfeffaf53ff6ee95f185 sind Blockelemente. Im Gegenteil, die Eigenschaften des Inline-Elements sind:

und andere Elemente befinden sich in derselben Zeile;

Höhe, Zeilenhöhe sowie oberer und unterer Rand können nicht geändert werden; 🎜> width ist Die Breite des Textes oder Bildes kann nicht geändert werden.

45a2772a6b6107b401db3c9b82c049c2, 3499910bf9dac5ae3c52d5ede7383485, 2e1cf0710519d5598b1f0f14c36ba674, d5fd7aea971a85678ba271703566ebfd, 8e99a69fbe029cd4e2b854e244eab143 und 907fae80ddef53131f3292ee4f81644b

Verwenden Sie den Befehl code class="inline">display: inline oder display: block, um diese Funktion eines Elements zu ändern. Wann müssen Sie dieses Attribut ändern?

Lassen Sie ein Inline-Element in einer neuen Zeile beginnen.

Halten Sie Blockelemente und andere Elemente in einer Zeile.

Steuern Sie die Breite von Inline-Elementen (besonders nützlich für Navigationsleisten). );

Steuern Sie die Höhe von Inline-Elementen;

Sie können eine Hintergrundfarbe mit der gleichen Breite wie der Text für ein Blockelement festlegen, ohne die Breite festzulegen.

Weitere Artikel zu CSS-Techniken finden Sie auf der chinesischen PHP-Website!