Ausführliche Erklärung zum Erstellen verschiedener Listen auf dem mobilen H5-Terminal (3)

黄舟

Freigeben： 2018-05-28 16:21:29

Original

2657 Leute haben es durchsucht

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.

Ausführliche Erklärung zum Erstellen verschiedener Listen auf dem mobilen H5-Terminal (3)

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>

Nach dem Login kopieren

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

In diesem Beispiel verwenden wir das Positionierungslayout. Wenn Sie nicht viel über Positionierungslayout wissen, lesen Sie bitte meinen Blog-Beitrag „CSS Detaillierte Interpretation von Positionierungsattributen und -parametern“.

.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%;        
        }
    }
}

Nach dem Login kopieren

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

Eine Liste mit Symbolen, aber die Trennlinie muss am Text ausgerichtet sein.

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 Ausführliche Erklärung zum Erstellen verschiedener Listen auf dem mobilen H5-Terminal (3)

ohne weiteres, passen Sie den CSS-

SASS-Code

an und fügen Sie die linke Polsterung ursprünglich auf

oben 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%;        
        }
    }
}

Nach dem Login kopieren

verschoben. Der Designeffekt ist erreicht.

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

Dieses Kapitel konzentriert sich auf die folgenden Punkte:

Das ist sehr wichtig.

Verwenden Sie verschiedene Elemente flexibel, verwenden Sie Innenfüllung oder Außenfüllung, um den gewünschten Effekt zu erzielen.

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!