So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (2)
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>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; }
}
}
} 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
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>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 –html5rechte schwebende Methode, positionieren Sie die Zeit rechtstime
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
