Tutorial zum Ändern der CSS-Interlaced-Farben

Wir wissen, dass in HTML der Farbdifferenz-Layouteffekt vor den ul- und li-Listen erforderlich ist. Wie kann man also CSS verwenden, um die Farbe von ul li in alternativen Zeilen zu ändern? Heute werde ich Ihnen ein Beispiel zur Demonstration geben.

Um den Programmaufruf nicht zu beeinträchtigen und das Programm zu vereinfachen, verwenden Sie das ul-li-Listenlayout, um das obige Intervall-Hintergrundfarblayout zu erreichen. Gleichzeitig wird die Maus über das li bewegt, um es zu ändern Die Hintergrundfarbe Es gibt normalerweise zwei Methoden.

Die erste Methode: Hintergrundbild, schneiden Sie einen schmalen vertikalen Streifen aus Hintergrundbildmaterial aus, verwenden Sie das Hintergrundbild als UL-Hintergrund und lassen Sie das Hintergrundbild als UL-Hintergrund verwenden und dann nach oben, unten kacheln, links und rechts können Sie den Abstandseffekt leicht erzielen.

Zweiter Typ: Verwenden Sie JQ-Spezialeffekte, um durch JS-Spezialeffekte einen solchen Effekt zu erzielen, bei dem die Hintergrundfarbe verteilt und die Hintergrundfarbe geändert wird, wenn die Maus darüber fährt und müssen JS-Dateien und Codes einführen.

Als nächstes werden wir diese beiden Methoden anhand von Grafik- und Text- + Online-Demonstrationsbeispielen vorstellen.

Hintergrundbildmaterial implementiert die Hintergrundintervallfarbe der Li-Liste

Dieser DIV + CSS-Fall ist eine empfohlene Methode, die einfach und bequem ist, Code spart und auch die Hintergrundfarbe erreichen kann Effekt ändern, wenn die Maus über das Li bewegt wird.

Die Vorgehensweise ist wie folgt:

Schneiden Sie ein Li mit einer Breite von 1 Pixel und einer Höhe von genau zwei Farben als Bildmaterial aus

HTML-entsprechender Quellcode

<ul class="licss"> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
</ul>

Das Obige ist der Layoutinhalt von ul li. Der Schlüssel liegt darin, das Schreiben und die Erklärung des CSS-Codes unten zu sehen.

4. Entsprechender CSS-Code

ul.licss{ margin:0 auto; :url(ul-bg.gif); text-align:left} /* Der Hintergrund führt nur das Bild ein und kann im Vollbildmodus innerhalb des Objekts gekachelt werden, ohne andere Parameter festzulegen*/

ul.licss li{ width:100% ;

text-indent

:10px; line-height:34px} /* Die Höhe muss berechnet werden und hat eine bestimmte Beziehung zum Layoutbild*/

ul.licss li:hover{ background:#EBEBEB}

/* Um eine dynamische Änderung der Hintergrundfarbe zu erreichen, legen Sie die Hover-Pseudoklasse fest für li*/

Hier separat koppeln ul legt eine Klasse fest. Erläuterung: Im tatsächlichen Layout wird an vielen Stellen das ul li-Layout verwendet, um die Verwendung von ul an anderen Stellen zu unterscheiden, wird die Klasse hier separat für die Instanz benannt.

CSS-Erweiterung: Wenn Sie die Farbe ändern möchten, wenn die Maus über li bewegt wird, können Sie CSS ul.licss li:hover{Hintergrundfarbe festlegen} festlegen.

Flexible Verwendung: Gemäß Beispielen können Sie die Ul-Li-Layoutfähigkeiten auf Nicht-Li-Layouts erweitern, um die Hintergrundintervallfarbe des Listentyp-Layouts zu implementieren.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So konvertieren Sie HTML 2d und 3d

HTML5 Video-Audio-Implementierungsschritte

Js gängige Methoden zum Erhalten von Stilen

Das obige ist der detaillierte Inhalt vonTutorial zum Ändern der CSS-Interlaced-Farben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!