Heim > Artikel > Web-Frontend > So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (1)

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

黄舟Original: 2017-03-10 16:28:312518Durchsuche

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.

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.

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:

Wie oben gezeigt, ist das, was wir implementieren möchten, eine so einfache Liste. Das ist überhaupt nicht schwierig. So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (1)

HTML-Code

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>

Es wird empfohlen, dass Server, Datenbanken, Back-End-Programme sowie Front-End-HTML und CSS alle einheitlich in utf-8 codiert sind, um durch die Codierung verursachte verstümmelte Zeichen zu vermeiden SASS-Code

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Alle Einheiten hier verwenden
, in unserem
haben wir die Schriftgröße von

auf

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

. Bitte klicken Sie auf den Link am Anfang dieses Artikels, um die Erklärung im Artikel zu lesen, den ich zuvor geschrieben habe 🎜> Wenn Sie Sass nicht kennen, lesen Sie bitte zuerst die Sass-bezogenen Tutorials. Sie können es auf jeden Fall in einer Stunde lernen und in zwei Tagen problemlos spielen >Es ist immer noch eine einfache Liste

Werfen 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

SASS-Code

Eigentlich ist es nur ein wenig. Weisen Sie einfach den Füllwert auf dem geladenen li in demo1 zu ul und li.

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

Okay, durch diese beiden Demos sollten wir in den folgenden Kapiteln ein gewisses Verständnis für einige grundlegende Situationen haben Sie mit einer Vielzahl verschiedener Listen.

Dies sind zwei Vorspeisen, ganz einfach. Die folgenden Punkte müssen erklärt werden:

Legen Sie die Breite eines Elements fest , da dies eine Liste ist, die eine Zeile einnimmt

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementierung des Fortschrittsbalkens für das Laden von HTML5/CSS3-Webseiten, des Download-Fortschrittsbalkens und anderer klassischer FälleNächster Artikel：Implementierung des Fortschrittsbalkens für das Laden von HTML5/CSS3-Webseiten, des Download-Fortschrittsbalkens und anderer klassischer Fälle

In Verbindung stehende Artikel

Mehr sehen