So erstellen Sie eine mobile HTML5-Liste-H5-Tutorial-php.cn

So erstellen Sie eine mobile HTML5-Liste

一个新手

Freigeben： 2017-09-06 10:21:19

Original

2084 Leute haben es durchsucht

Vorwort

Der CSS-Teil dieser Artikelserie wird vollständig in SASS-Syntax geschrieben. Wenn Sie SASS nicht kennen, wird dies empfohlen Lesen Sie relevante Tutorials, einschließlich meines eigenen Tutorials „Zusammenfassung der SASS-Lernerfahrung zur 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 eine mobile HTML5-Liste

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>

Nach dem Login kopieren

Es wird empfohlen, dass Server, Datenbanken, Back-End-Programme und Front-End-HTML und CSS alle 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" />

ist immer noch eine einfache Liste

Werfen wir zunächst einen Blick auf die Darstellungen:

.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;}
    }
}
这里的单位全部使用的是,我们里面,已经将的字体大小设置为了,也就相当于正常情况下的10px.也就是说,上面的相当于.至于为什么这么写,请到本文开头的链接里面查看前面我写的文章中的解释. 
不会sass的,请先阅读sass相关教程.不要觉得难,一个小时保证学会,两天能玩的非常溜.

Nach dem Login kopieren

Auf den ersten Blick , es gibt keinen Unterschied zwischen dieser Liste und der obigen Liste. Wenn wir jedoch genau hinschauen, werden wir feststellen, dass es sich nicht um ein Nicken handelt. Oftmals haben Designer ihre eigenen Als Front-End-Mitarbeiter müssen wir einige der kleinen Details des Designs des Designers genau wiederherstellen Derselbe wie im ersten Beispiel. Der Code wird hier nicht wiederholt.

SASS-Code

Tatsächlich ist es auch so. Ändern Sie einfach die Idee leicht. Weisen Sie dem geladenen Wert zu li in demo1 zu ul und li So erstellen Sie eine mobile HTML5-Liste

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine mobile HTML5-Liste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!