Web-Frontend
H5-Tutorial
Ausführliche Erklärung zum Erstellen verschiedener Listen auf dem mobilen H5-Terminal (3)
Ausführliche Erklärung zum Erstellen verschiedener Listen auf dem mobilen H5-Terminal (3)
So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (3)
Überprüfung der vorherigen Situation
Im vorherigen Blogbeitrag „Mobile Terminal In“ Verschiedene Listenerstellungsmethoden (2)“, wir verwenden zwei DEMOs, um die Listenerstellung zu demonstrieren, die in mobilem H5 anspruchsvoller ist. Es scheint jedoch recht einfach zu sein. Gehen Sie in diesem Kapitel tiefer.
Wenn Sie Wenn Sie diesen Artikel zuerst gesehen haben, wird empfohlen, dass Sie auf den Link oben gehen und zuerst den entsprechenden Inhalt lesen, damit der Kontext kohärent ist und der Inhalt dieses Artikels leichter zu verstehen ist.
Liste mit kleinen Symbolen
In den beiden oben genannten Kapiteln haben wir in Mobile H5 häufig Listen mit einem kleinen Symbol pro Zeile erstellt. In dieser DEMO sehen wir diese Art von Liste unten.
Ich werde hier nicht das kleine Symbol verwenden und stattdessen einen Kreis zeichnen.
HTML-Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>list 1</title>
<link rel="stylesheet" href="../style/style.css"></head><body>
<p class="list_1">
<ul>
<li><a href=""><i class="ico ico_1"></i>这是一个列表1</a></li>
<li><a href=""><i class="ico ico_2"></i>这是一个列表2</a></li>
<li><a href=""><i class="ico ico_3"></i>这是一个列表3</a></li>
<li><a href=""><i class="ico ico_4"></i>这是一个列表4</a></li>
<li><a href=""><i class="ico ico_5"></i>这是一个列表5</a></li>
<li><a href=""><i class="ico ico_6"></i>这是一个列表6</a></li>
<li><a href=""><i class="ico ico_7"></i>这是一个列表7</a></li>
<li><a href=""><i class="ico ico_8"></i>这是一个列表8</a></li>
</ul></p></body></html> Der HTML-Code hier unterscheidet sich vom vorherigen Beispiel. Hier fügen wir ein i-Tag hinzu, um jedem i-Tag einen anderen Wert hinzuzufügen. Das class dient zum Anpassen verschiedener Symbole SASS-Code
.list_1 { ul {padding-left: 1.6rem;}
li { border-bottom: 1px solid #ddd;padding-right: 1.6rem;
a {
display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;
background:url("../image/icon_goto.png") right center no-repeat;
background-size: auto 1.4rem;
padding-left: 3rem;
position: relative;
}
.ico {
display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: 0;top: .8rem;
background: #f60;border-radius: 50%;
}
}
}-Tag hinzugefügt. Verschiedene Klassen erleichtern das Aufrufen verschiedener Symbolbilder in CSS. Mit anderen Worten: Wir verwenden Hintergrundbilder, um Symbole zu erstellen >
SASS unterstützt die Schleifenausgabe, daher ist nur ein Schleifencode erforderlich. Hier müssen Sie auch verwenden, um die Symbole zu verarbeiten Ich werde hier nicht auf Details eingehen. Für SASS-Schleifen wird empfohlen, die Implementierungsmethode auf der offiziellen Website von „Erste Schritte mit Sass“ zu überprüfen hier. i
background-size Schauen wir uns zunächst die Darstellung an: background-size
Diese Liste unterscheidet sich auf den ersten Blick nicht von der obigen Liste. Wenn Sie jedoch genau hinsehen, werden Sie feststellen, dass die Trennlinie am Text ausgerichtet ist, anstatt am Symbol.
Machen Sie mir nicht die Schuld, weil der Designer es so entworfen hat. Wenn es nicht gemacht wird, wird der Designer sehr wütend sein.
Der HTML-Code ist derselbe wie in der DEMO oben. Das werde ich nicht tun Wiederholen Sie 
an und fügen Sie die linke Polsterung ursprünglich auf
zuoben hinzu Auf diese Weise kann
komprimiert werden, um den Effekt einer Reduzierung der Kanten zu erzielen.Bei der Verarbeitung von Symbolen verwendet der
-Wert eine negative Zahl und wird in die Auffüllung von.list_1 {
ul {padding-left: 4.6rem;}
li {
border-bottom: 1px solid #ddd;
padding-right: 1.6rem;
position: relative;
a {
display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;
background:url("../image/icon_goto.png") right center no-repeat;
background-size: auto 1.4rem;
}
.ico {
display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: -3rem;top: .8rem;
background: #f60;border-radius: 50%;
}
}
}aZusammenfassungulliDieses Kapitel konzentriert sich nicht auf den Umgang mit SASS-Schleifen. Sie können sie schnell lernen, indem Sie sich auf das SASS-Tutorial beziehen.leftIch gehe hier davon aus, dass ich die Hintergrundbildmethode verwende, um kleine Symbole zu realisieren. Natürlich gibt es viele Möglichkeiten, die Produktion kleiner Symbole wie CSS-Symbole zu realisieren. Jede dieser Implementierungsmethoden hat Vor- und Nachteile sind nicht das, woran ich heute denke. ul
- Verwenden Sie unterschiedliche Klassennamen, um unterschiedliche Effekte zu erzielen. Kleines Symbol.
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Erstellen verschiedener Listen auf dem mobilen H5-Terminal (3). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1381
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
