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

Linux-Datenträgerverwaltung – LVM-Nutzung

1. Einführung in LVM Bei der Verwaltung von Linux...

Detaillierte Erklärung der grundlegenden Verwendung von MySQL-Triggern [Erstellen, Anzeigen, Löschen usw.]

Inhaltsverzeichnis 1. MySQL-Trigger erstellen: 1....

Schreiben Sie einen formellen Blog mit XHTML CSS

Der vollständige Name von Blog sollte Weblog sein...

Die aktuellen Einschränkungen von Nginx in einem Artikel verstehen (einfache Implementierung)

Nginx ist mittlerweile einer der beliebtesten Loa...

So konfigurieren Sie mysql5.6 zur Unterstützung von IPV6-Verbindungen in einer Linux-Umgebung

Einführung: Dieser Artikel stellt hauptsächlich v...

Lösung zur Definition der Mindestspannweite hat keine Auswirkung

Das Span-Tag wird häufig beim Erstellen von HTML-W...

Aufzeichnung des tatsächlichen Prozesses der Verpackung und Bereitstellung des Vue-Projekts

Inhaltsverzeichnis Vorwort 1. Vorbereitung - Serv...

Div in HTML ausblenden Tabelle ausblenden TABLE- oder DIV-Inhalt im CSS-Stil

Ich habe heute Abend ein Problem gelöst, das mich...

Div-CSS-Benennungsstandards, CSS-Klassenbenennungsregeln (entsprechend SEO-Standards)

Bei der Suchmaschinenoptimierung (SEO) sind viele ...

50 Codezeilen zur Implementierung von Nutzungsstatistiken für Webpack-Komponenten

Hintergrund Kürzlich wollte ein Leiter, dass wir ...

WeChat-Applet + ECharts zur Realisierung eines dynamischen Aktualisierungsprozesses

Vorwort Kürzlich stieß ich auf eine Anforderung, ...

Sie müssen wirklich die Verwendung von CSS-Variablen var() verstehen

Wenn ein Webprojekt immer größer wird, werden sei...

Apache Calcite-Code zur Dialektkonvertierung

Definition Calcite kann SQL vereinheitlichen, ind...

Layui implementiert Beispielcode für Abfragen mit mehreren Bedingungen

Ich habe vor kurzem ein Dateisystem erstellt und ...

Führt MySQL die Aktualisierungsanweisung erneut aus, wenn sie dieselben Daten enthält wie die ursprüngliche?

Hintergrund In diesem Artikel wird hauptsächlich ...