Heim >Web-Frontend >H5-Tutorial >Ausführliche Erklärung zum Erstellen verschiedener Listen auf dem mobilen H5-Terminal (3)
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.
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.
<!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%; } } }Da außerdem jedes Symbol anders sein muss, habe ich jedem im HTML ein
-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
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
ohne weiteres, passen Sie den CSS-SASS-Codean 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..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%; } } }verschoben. Der Designeffekt ist erreicht.
a
Zusammenfassungul
li
Dieses Kapitel konzentriert sich nicht auf den Umgang mit SASS-Schleifen. Sie können sie schnell lernen, indem Sie sich auf das SASS-Tutorial beziehen.left
Ich 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
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!