So implementieren Sie Code und Schritte für den digitalen Paging-Effekt in CSS

Eine beträchtliche Anzahl von Websites verwendet digitale Paging-Effekte. Beispielsweise wird beim Paging dieser Site auch diese Methode verwendet, die recht schön zu verwenden ist.
Das Codebeispiel lautet wie folgt

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<Kopf>
<title>Ameisenstamm</title>
<style type="text/css">
ul
{
Listenstil: keiner;
}
ul li
{
schweben: links;
Breite: 22px;
Höhe: 22px;
Rand links: 5px;
}
A
{
Breite: 20px;
Höhe: 20px;
Anzeige:Block;
Textausrichtung: zentriert;
Textdekoration: keine;
Hintergrundfarbe: weiß;
Rand: 1px durchgezogen #666;
}
ein:schweben
{
Breite: 40px;
Höhe: 30px;
Rand: 1px durchgezogen #666;
Position: absolut;
Zeilenhöhe: 30px;
Rand: -5px 0 0 -10px;
}
</Stil>
</Kopf>
<Text>
<ul>
<li><a href="#">1</a></li>
<li><a 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>
</ul>
</body>
</html>

Der obige Code erzielt den gewünschten Effekt. Hier ist eine kurze Einführung in die Implementierungsschritte :
1. Verwenden Sie die Float-Eigenschaft, um die Li-Elemente horizontal auszurichten.
2. Legen Sie die a-Elemente als Elemente auf Blockebene fest und legen Sie anschließend ihre Größen fest.
3. Indem Sie die Größe des A-Elements steuern, wenn die Maus auf den Link gesetzt wird, und indem Sie die absolute Positionierung verwenden, kann das aktuelle A-Element die umgebenden Elemente überdecken.
Besonderer Hinweis: Der Grund, warum die Hintergrundfarbe des Elements auf Weiß eingestellt ist, liegt darin, dass der Hintergrund standardmäßig transparent ist. Wenn die Hintergrundfarbe nicht eingestellt ist, werden die Ränder auf beiden Seiten abgedeckt.

<<: Sperrt Mysql ALTER TABLE die Tabelle beim Hinzufügen von Feldern?

>>: So handhaben Sie lange Daten bei der Anzeige in HTML

So ändern Sie den Hostnamen in Linux dauerhaft

So implementieren Sie Code und Schritte für den digitalen Paging-Effekt in CSS

So ändern Sie den Hostnamen in Linux dauerhaft

So verwenden Sie Nginx zur Simulation einer Blue-Green-Bereitstellung

Eine detaillierte Einführung in die Bereitstellung einer RabbitMQ-Umgebung mit Docker

Hinweise zur Adresszuordnung von Gerätetreibern im Linux-Kernel

Spezifische Verwendung von CSS-Inhaltsattributen

Reiner CSS-freier Implementierungscode für Websites mit Umschaltfunktion für den Dunkelmodus

Linux Überprüfen Sie den Installationsort der Software einfache Methode

Detaillierte Erklärung verschiedener Loop-Speed-Tests in JS, die Sie nicht kennen

CSS legt den Listenstil fest und erstellt den Implementierungscode für das Navigationsmenü

Der eigentliche Prozess der Einbindung von Axios in das Projekt

Artikel empfehlen

So ändern Sie das Kennwort von mysql5.7.20 unter Linux CentOS 7.4

So führen Sie nginx in Docker aus und mounten das lokale Verzeichnis in das Image

Detaillierte Erläuterung zur Konfiguration der mehrfädigen Master-Slave-Replikation von MySQL 5.7-Slaveknoten

Grundlegendes zu MySQL-Clusterindizes und wie Clusterindizes wachsen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15

Zusammenfassung häufiger Probleme und Lösungen in Vue (empfohlen)

Tutorial zur HTML-Tabellenauszeichnung (1): Erstellen einer Tabelle

Vue implementiert den Download von ZIP-Dateien

MySQL 5.7.21 dekomprimierte Version des Tutorials zum Wiederherstellen von Daten über das historische Datenverzeichnis

Das Docker-Intranet erstellt DNS und verwendet den Domänennamenzugriff anstelle des IP:Port-Vorgangs.

Implementierung der Docker-Bereitstellung eines MySQL-Clusters

MySQL-Reihe: Datenbankdesign, drei Paradigmen, Tutorial-Beispiele

Detaillierte Erklärung zum Erstellen eines Arrays in JavaScript

MySQL 8.X Installations-Tutorial unter Windows

Häufige Fehler und Gründe für MySQL-Verbindungsfehler