Heim > Artikel > Web-Frontend > Wie erstelle ich einen Abschnittszähler mit HTML und CSS?
Wie erstelle ich einen Abschnittszähler mit HTML und CSS?
- 王林nach vorne
- 2023-08-25 20:01:06836Durchsuche
Da die Komplexität von Websites zunimmt, wird es für Webentwickler immer wichtiger, intuitive und benutzerfreundliche Navigationssysteme zu implementieren, die es Benutzern ermöglichen, problemlos durch die Inhalte auf der Webseite zu navigieren. In den letzten Jahren erfreut sich ein Navigationselement namens „Abschnittszähler“ immer größerer Beliebtheit, das den Benutzern ein klares Verständnis vermittelt.
Was ist ein Abschnittszähler?
Ein Abschnittszähler in HTML und CSS ist ein visuelles Element, das die aktuelle Abschnittsnummer oder Position des Benutzers auf einer Webseite anzeigt, normalerweise in einem Navigationsmenü oder neben der Abschnittsüberschrift angezeigt.
Blockzähler sind für Benutzer hilfreich, insbesondere wenn die Webseite viele Abschnitte oder Unterabschnitte enthält, damit Benutzer den Überblick behalten, wo sie sich auf der Webseite befinden. Mit dem Blockzähler können Benutzer schnell zum gewünschten Abschnitt wechseln und sehen auch die Gesamtstruktur der Webseite.
Abschnittszähler werden normalerweise mithilfe von CSS-Zählern implementiert, die es Webentwicklern ermöglichen, Zähler für verschiedene Zwecke zu erstellen und zu bearbeiten. Durch die Verwendung von CSS zum Gestalten und Anzeigen des Zählers können Webentwickler das Erscheinungsbild des Zählers an das Design und die Ästhetik anpassen die Website.
Abschnittszählereigenschaft
Um einen Abschnittszähler in HTML und CSS zu erstellen, benötigen wir die folgenden Eigenschaften.
counter-reset - Die Eigenschaft counter-reset wird zum Initialisieren eines CSS-Zählers verwendet. Ein Zähler ist eine Variable, die mithilfe der Eigenschaft counter-increment erhöht oder verringert werden kann, und wird häufig verwendet, um die Zahl zu verfolgen oft ein Element auf einer Webseite.
Counter-Inkrement - Die Counter-Inkrement-Eigenschaft wird verwendet, um einen CSS-Zähler zu erhöhen. Wir verwenden diese Eigenschaft, um den Wert des Zählers jedes Mal zu erhöhen, wenn ein bestimmtes Element auf der Webseite erscheint.
content − Das Attribut content wird verwendet, um den Inhalt anzugeben, der im Element angezeigt werden soll.
Beispiel 1
lautet:Beispiel 1
Hier ist ein einfaches Beispiel für einen Kapitelzähler mit HTML und CSS
<html>
<head>
<style>
body {
counter-reset: section;
background-color:#dee3e0;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
</style>
</head>
<body>
<h2>First Secction</h2>
<p>This is the first section of my website.</p>
<h2>Second Section</h2>
<p>This is the second section of my website.</p>
<h2>Third Section</h2>
<p>This is the third section of my website.</p>
</body>
</html>
Beispiel 2
Im folgenden Beispiel erstellen wir mithilfe von HTML und CSS einen animierten Abschnittszähler.
<!DOCTYPE html>
<html>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
<style>
* {
box-sizing: border-box;
}
/* 4 counters of 25% of screen size*/
.column {
float: left;
width: 25%;
padding: 4px;
}
.row {
margin: 5px;
}
/* Style the block*/
.block {
padding: 10px;
text-align: center;
background-color: #bccfc1;
color: black;
}
/* Styling when mouse will move over the counter*/
.block:hover {
transform: scale(1.1);
background-color: red;
transition-duration: 2s;
color: white;
}
.fa {
font-size: 60px;
}
</style>
</head>
<body>
<center>
<h3> Create Counter Section using HTML and CSS </h3>
<section class="row">
<section class="column">
<section class="block">
<p><i class="fa fa-user"></i></p>
<h3>200000+</h3>
<p>Users</p>
</section>
</section>
<section class="column">
<section class="block">
<p><i class="fa fa-book"></i></p>
<h3> 7000+ </h3>
<p> Courses </p>
</section>
</section>
<section class="column">
<section class="block">
<p><i class="fa fa-smile-o"></i></p>
<h3> 15M+ </h3>
<p> Visitors </p>
</section>
</section>
<section class="column">
<section class="block">
<p><i class="fa fa-certificate"></i></p>
<h3> 1M+ </h3>
<p> Certificates </p>
</section>
</section>
</section>
</center>
</body>
</html>
Fazit
Das Erstellen eines Kapitelzählers mit HTML und CSS ist eine einfache Möglichkeit, Besuchern die Navigation auf Ihrer Website zu erleichtern. Durch die Organisation von Inhalten in Kapiteln und die Verwendung von CSS zur Anzeige von Zählern können wir es Benutzern erleichtern, den Überblick darüber zu behalten, wo sie sich auf der Website befinden. Mit grundlegenden HTML- und CSS-Techniken können wir einen für unsere Website geeigneten Kapitelzähler erstellen und so dazu beitragen, das Benutzererlebnis zu verbessern.
Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Abschnittszähler mit HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Wie erstelle ich mit Flexbox ein symmetrisches Bildbanner?
- Wie kann ich Hintergrundbilder mit CSS ohne JavaScript dynamisch festlegen?
- Wie wähle ich das letzte untergeordnete Element aus, das keine bestimmte Klasse in CSS hat?
- Wie erstelle ich mit reinem CSS Spalten gleicher Höhe?
- Kann ich CSS-Variablen in IE11 ohne native Unterstützung verwenden?