So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (1)
So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (1)
Vorwort
Mit der Entwicklung des mobilen Internets gibt es eine große Anzahl Viele der Front-End-Mitarbeiter sind vom PC auf Mobilgeräte umgestiegen. Ein Großteil der PC-Front-End-Erfahrung ist jedoch nicht auf Mobilgeräte anwendbar. Ein Blog-Beitrag, den ich vor ein paar Tagen geschrieben habe: „Zusammenfassung einiger grundlegender Wissenspunkte von Mobile H5“. Ich habe viele Klicks erhalten. Daher hat FungLeo beschlossen, dass ich in der nächsten Zeit eine Reihe von Tutorials rund um das mobile Endgerät starten werde.
Mein Niveau ist begrenzt und meine Fähigkeiten sind durchschnittlich, daher wird es zwangsläufig Fehler und Auslassungen im Artikel geben. Daher ist jeder willkommen, Kommentare zu hinterlassen Ich werde es so schnell wie möglich melden. Vielen Dank an alle.Lassen Sie uns zunächst die einfachste Liste erstellen unten:Der CSS-Teil dieser Artikelserie wird vollständig geschrieben Wenn Sie SASS nicht kennen, empfehlen wir Ihnen, relevante Tutorials zu lesen, einschließlich meines Tutorials „Zusammenfassung der SASS-Lernerfahrung mit CSS-Vorkompilierungstechnologie“. Diese Artikelserie bezieht sich auf die beiden Basisdokumente reset.scss und mixin.scss, die zum Zurücksetzen des Browserstils verwendet werden, sowie auf einige grundlegende SASS-Codeblöcke. Da der Code länger ist, lesen Sie bitte die Blog-Grundlagen der „Mobile Terminal Series“. reset.scss und mixin.scss》erhalten.
Wie oben gezeigt, ist das, was wir implementieren möchten, eine so einfache Liste. Das ist überhaupt nicht schwierig.
Was hier erklärt werden muss, ist, dass das mobile Endgerät den
-Code hinzufügen muss. Andernfalls behandelt der mobile Browser ihn als eine PC-Version der Webseite, die skalierbar ist 🎜><!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><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Alle Einheiten hier verwendenauf, in unserem
haben wir die Schriftgröße von
eingestellt, was im Normalfall 10 Pixel entspricht Mit anderen Worten, das obige
entspricht.list_1 { ul {}
li {
border-bottom: 1px solid #ddd;padding:0 1.6rem;
a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}
}
}SASS-CodeWerfen wir zunächst einen Blick auf die Darstellungen:
remreset.scsshtml62.5%1.6remAuf den ersten Blick gibt es keinen Unterschied zwischen dieser Liste und die obige Liste. Wenn wir jedoch genauer hinsehen, werden wir feststellen, dass die folgenden Zeilen nicht die oberste sind.16px
Seien Sie nicht überrascht, dass Designer beim Entwerfen oft ihre eigenen Designkonzepte haben Auf diese Weise müssen wir als Front-End-Personal einige der kleinen Details des Designer-Designs wiederherstellen. Auch wenn Sie denken, dass dieser HTML-Code genau derselbe ist Beispiel. Ich werde den Code hier nicht wiederholen
Eigentlich ist es nur ein wenig. Weisen Sie einfach den Füllwert auf dem geladenen li in demo1 zu ul und li.
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;}
}
}Sie können die Innenpolsterung festlegen, ohne die Breite festzulegen, was keine Probleme verursacht.
Überlaufverarbeitung ausblenden, um zu verhindern, dass der Titel zu lang wird und Zeilenumbrüche verursacht.
Das obige ist der detaillierte Inhalt vonSo erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (1). 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.
