Heim >Web-Frontend >H5-Tutorial >So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (2)
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
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:
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
<!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>
HTML-Code ist genau derselbe wie im Beispiel in Kapitel 1.
.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; } } } }
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;
Okay, die erste Demo ist so einfach fertig
Schauen wir uns zunächst die Darstellung an:
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.
<!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>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;} } }
Ich glaube, dass diese beiden DEMOs nicht sehr schwer zu verstehen sind Lassen Sie uns eine kleine Zusammenfassung erstellen:a
Verwendung und Abkürzung und warum wir dieses Attribut derzeit nicht abkürzen.
Zeit hat ein spezielles background-size
-Tag –
html5
rechte 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!