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 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.
Wie oben gezeigt, ist das, was wir implementieren möchten, eine so einfache Liste. Das ist überhaupt nicht schwierig.
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>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
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相关教程.不要觉得难,一个小时保证学会,两天能玩的非常溜.
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
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!