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

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

Artikel empfehlen

So installieren Sie die neueste Version von Docker mit dem Befehl „Deepin apt“

Schritt 1: Ubuntu-Quelle hinzufügen Wechseln Sie ...

So verwenden Sie Dayjs zum Berechnen gängiger Daten in Vue

Bei der Verwendung von Vue zur Entwicklung von Pr...

Einfaches Teilen von Mysql-Backup-BAT-Skripten unter Windows

Vorwort Dieser Artikel stellt ein einfaches BAT-S...

Beispiele für die Verwendung von MySQL-Abdeckungsindizes

Was ist ein Deckungsindex? Das Erstellen eines In...

Flexibles Boxmodell von CSS und CSS3 zur Anpassung der Elementbreite (-höhe)

1. CSS realisiert eine feste Breite links und ein...

JavaScript zum Erzielen eines Vollbild-Seiten-Scrolleffekts

Nachdem ich mit der Lektüre von JavaScript DOM fe...

Beispiel der MySQL-Group_Concat-Methode zum Schreiben von Gruppenfeldern in eine Zeile

Dieser Artikel beschreibt anhand eines Beispiels,...

JavaScript-Entwurfsmuster – Muster der Verantwortungskette

Inhaltsverzeichnis Überblick Code-Implementierung...

Fallbeispiel zur TypeScript-Schnittstellendefinition

Die Rolle der Schnittstelle: Schnittstelle, auf E...

Implementierung einer zeitgesteuerten Seitenaktualisierung oder Weiterleitung basierend auf Metadaten

Verwenden Sie Metadaten, um eine zeitgesteuerte A...

Detaillierte Erläuterung der MySql-Analyse langsamer Abfragen und Öffnen des Protokolls langsamer Abfragen

Ich habe mich kürzlich auch mit der Leistungsopti...

Zusammenfassung der drei Regeln für die React-Statusverwaltung

Inhaltsverzeichnis Vorwort Nr.1 Ein Fokus Nr. 2 E...

Zeigen Sie die Festplatten-E/A in Linux an und finden Sie die Prozesse heraus, die viel Lese- und Schreib-E/A beanspruchen

Hintergrund - Online Alert Ein Online-Server hat ...

Gemeinsame Nutzung verschiedener Methoden zum Deaktivieren des Seitencaches

Heute bin ich beim Entwickeln auf eine Methode ge...

Zusammenfassung der Verwendung von drei For-Schleifenanweisungen in JavaScript (for, for...in, for...of)

Vorwort Jeder Entwickler, der mit JS in Berührung...