So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (2)

黄舟

Freigeben： 2017-03-10 16:31:53

Original

1303 Leute haben es durchsucht

So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (2)

Überprüfung der vorherigen Situation

Im vorherigen Blogbeitrag In " „Wie man verschiedene Listen auf dem mobilen Endgerät erstellt (1)“, wir haben die Listenerstellung in H5 auf dem mobilen Endgerät anhand von zwei einfachen DEMOs demonstriert. Diese beiden Demonstrationen sind jedoch immer noch zu einfach. Vielleicht denkt jeder, dass es genau das ist. In diesem Kapitel , wir werden eine etwas kompliziertere Liste erstellen

Wenn Sie diesen Artikel zuerst gesehen haben, empfehlen wir Ihnen, zuerst auf den Link oben zu gehen und den entsprechenden Inhalt einzufügen dass der Kontext kohärent ist und der Inhalt dieses Artikels leichter zu verstehen ist

Liste mit Rechtspfeil

Dieses Beispiel ähnelt tatsächlich dem zweiten im vorherigen. Es gibt nur einen zusätzlichen rechten Pfeil auf der rechten Seite. Der Effekt, den wir erzielen möchten, ist in der folgenden Abbildung dargestellt:

So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (2)

Wie oben gezeigt, auf der rechten Seite In der Liste gibt es einen Pfeil nach rechts. Vielleicht fragen Sie sich, warum die untere Linie nach oben zeigt. Sie müssen nur das Prinzip kennen, dann können Sie tun, was Sie wollen

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="">这是一个列表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>
        <li><a href="">这是一个列表8</a></li>
    </ul></p></body></html>

Nach dem Login kopieren

HTML-Code ist genau derselbe wie im Beispiel in Kapitel 1.

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

Nach dem Login kopieren

ist Auch relativ einfach zu implementieren, fügen Sie einfach a hinzu. Es gibt ein Hintergrundbild mit einem Rechtspfeil.

Was hier jedoch einer besonderen Erklärung bedarf, ist, dass background-size tatsächlich mit background abgekürzt werden kann. Da jedoch Android 4.4 und niedriger nicht kompatibel sind, müssen wir es noch zerlegen und schreiben. Es wird erwartet, dass wir bis Ende 2016 möglicherweise alle alten Versionen von Android ignorieren können , das scheint nicht möglich zu sein

Sein Abkürzungscode:

background:url("../image/icon_goto.png") right center/auto 1.4rem no-repeat;

Nach dem Login kopieren

Okay, die erste Demo ist so einfach fertig

Eine Liste mit Datum und Pfeil nach rechts

Schauen wir uns zunächst die Darstellung an:

带日期的,So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (2)

Diese Liste ist nicht sehr kompliziert, sie fügt nur eine hinzu Das Datum wird rechts angezeigt und das Datum überschneidet sich nicht mit dem Titel. Schauen wir uns zunächst an, wie es geht Alles in allem bietet HTML5 ein Zeit-Tag, um die Zeit gezielt zu platzieren. Danach hat die Zeit ein besonderes Tag.

Zweitens, warum ist das so? Da es sich bei allen mobilen Endgeräten um Touch-Vorgänge handelt, müssen wir sicherstellen, dass Besucher den Link an einer beliebigen Stelle in der Klickliste öffnen können. Daher muss ein Block in maximalem Umfang verarbeitet werden. Dies unterscheidet sich stark von wann Wir haben es auf dem PC erstellt.

<!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=""><time>2016.03.14</time>这是一个列表1</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表2</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表3</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表4</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表5</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表6</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表7</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表8</a></li>
    </ul></p></body></html>

Nach dem Login kopieren

Zu den Listendaten habe ich auch einen alten Blog-Beitrag: „Mehrere Methoden zum Ausrichten der linken und rechten Seite von Titeln und Daten in.“ Nachrichtenlisten“

SASS-Code

ist nicht besonders kompliziert, nur um zu verhindern, dass sich das Datum und der rechte Pfeil überschneiden, wird

eine rechte Innenpolsterung hinzugefügt. Zusätzlich , die Zeit wird mit der richtigen Floating-Methode auf der rechten Seite platziert

Zusammenfassung

.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-right: 1.5rem;        }
        time {float: right;color: #999;}
    }
}

Nach dem Login kopieren

Ich glaube, dass diese beiden DEMOs nicht sehr schwer zu verstehen sind Lassen Sie uns eine kleine Zusammenfassung erstellen:a

Der Status des Linkblocks soll es mobilen Benutzern erleichtern, auf den Link zu klicken

Verwendung und Abkürzung und warum wir dieses Attribut derzeit nicht abkürzen.
Zeit hat ein spezielles background-size-Tag –
html5rechte schwebende Methode, positionieren Sie die Zeit rechts time

Das obige ist der detaillierte Inhalt vonSo erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!