Detailliertes Beispiel für HTML + CSS zur Erzielung eines statischen Paging-Effekts (mit Code)

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>

.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;}

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!