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:
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:
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!
