Haben Sie beim Surfen auf der Website den Paging-Effekt bemerkt? Freunde, die HTML und CSS lernen, können Sie statischen HTML-Paging-Code schreiben? In diesem Artikel werden Ihnen die Schritte zum Erstellen eines HTML-Paging-Effekts anhand von Beispielen vorgestellt. Zum Schluss werde ich Ihnen den HTML-Paging-Code als Referenz zur Verfügung stellen.
Um den Paging-Effekt zu erzielen, müssen Sie viele Attribute in CSS verwenden, z. B. Float, Hover-Pseudoklassenselektor, Textausrichtung usw. Wenn Sie sich nicht sicher sind, können Sie auf die entsprechenden Artikel verweisen auf der chinesischen PHP-Website oder besuchen Sie das CSS-Video-Tutorial, ich hoffe, es kann Ihnen helfen.
Beispiel erklärt ausführlich die Schritte von HTML+CSS, um einen statischen Paging-Effekt zu erzielen:
HTML-Teil
Erstellen Sie ein
<div class="center"> <ul class="page"> <li><a href="#">上一页</a></li> <li><a href="#">1</a></li> <li><a class="active" href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">下一页</a></li> </ul> </div>
Der aktuelle Effekt ist wie folgt:
CSS-Teil
Wie aus dem Bild oben ersichtlich ist, ist das aktuelle Die Seite ist hässlich, jetzt müssen wir CSS verwenden, um sie zu verschönern. Verwenden Sie zunächst „float: left“, um die ungeordnete Liste nach links zu verschieben, und ordnen Sie sie in einer Zeile an. Verwenden Sie „padding“, um den Abstand anzupassen Effekt auf den Paging-Effekt. Der spezifische Code lautet wie folgt:
.page { display: inline-block; padding: 0; margin: 0; } .page li {display: inline;} .page li a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } .page .active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } .page a:hover:not(.active) {background-color: #ddd;} .center {text-align: center;}
Der Effekt ist wie im Bild gezeigt:
Wie auf dem Bild zu sehen ist Unser statischer HTML-Paging-Effekt wurde implementiert. Wenn Sie mit der Maus auf den Paging-Inhalt klicken, wird der aktivierte Teil grün angezeigt. Wenn Sie mit der Maus über den Paging-Inhalt fahren, wird er grau angezeigt und der gesamte Paging-Effekt wird angezeigt in der Mitte der Seite.
Das Obige stellt vor, wie man HTML und CSS verwendet, um einen Paging-Effekt zu erzielen. Ich hoffe, dass dieser Artikel für Anfänger hilfreich ist Dir hilft!
【Empfohlene verwandte Tutorials】
1. Html-Video-Tutorial
2. CSS3-Referenzhandbuch
3 🎜>Bootstrap-Tutorial
Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für HTML + CSS zur Erzielung eines statischen Paging-Effekts (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!