H5行動端各種各樣的清單的製作方法(一)

前言

隨著行動網路的發展,大量前端人員從pc端轉移動端.而很多PC端的前端經驗並不適用於移動端.前幾日我撰寫的一篇博文《移動端H5的一些基本知識點總結》獲得了大量的點擊量.因此,FungLeo決定,在接下來的時間裡,我將圍繞移動端,展開一系列的教程.

本系列文章的CSS部分,將全部採用SASS語法撰寫.如果您不會SASS,建議閱讀相關教程,包括本人的《CSS預編譯技術之SASS學習經驗小結》教程.
本系列文章將引用reset.scss和mixin.scss兩個基礎文檔,用於重置瀏覽器樣式,和基礎的一些SASS代碼塊.由於代碼較長,請參閱《移動端系列博文基礎reset.scss和mixin.scss》獲取.

本人水平有限,能力一般,因此文章中將不可避免的有錯誤和遺漏.因此,歡迎大家在文章裡評論留言.我將在第一時間內回應.謝謝大家.

最簡單的列表

首先,來一個最簡單的列表.我們要實現的效果,如下圖所示:

H5行動端各種各樣的列表的製作方法(一)

#如上所示,我們要實現的就是這樣簡單的列表.這個沒有絲毫的難度.

html代碼

<!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">這段代碼.否則行動端的瀏覽器會當成PC版的網頁,是可以伸縮的.

#建議,伺服器,資料庫,後端程式,前台html以及CSS都全部統一為utf-8編碼.避免因為編碼造成亂碼的情況.

SASS代碼

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

這裡的單位全部使用的是rem,我們reset .scss裡面,已經將html的字體大小設定為了62.5%,也就相當於正常情況下的10px.也就是說,上面的1.6 rem相當於16px.至於為什麼這麼寫,請到本文開頭的連結裡面查看前面我寫的文章中的解釋.
不會sass的,請先閱讀sass相關教程.不要覺得難,一個小時保證學會,兩天能玩的非常溜.

##還是一個簡單的列表

首先,我們來看效果圖:

H5行動端各種各樣的列表的製作方法(一)

這個列表咋一看,和上面的列表沒有任何區別.但是,我們仔細看一下,會發現下面的線條是不頂頭的.

不要奇怪,很多時候,設計師這樣設計,是有其自己的設計理念的.作為前端人員,我們要忠實的還原設計師設計的一些小的細節.即便你認為這有點多此一舉.呵呵.

html程式碼,和第一個範例完全一樣.這裡不再重複程式碼

SASS程式碼

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

其實,也只是稍微的轉換一下思路.將在demo1裡面的載入li上的padding值,分配到ul和li上,就可以了.

小結

好,通過這樣兩個demo,我們應該對一些基本的情況有所了解了.FungLeo將在下面的章節裡面,逐漸的提高列表的複雜程度.為大家呈現各種各樣不同的列表.

這是兩道開胃菜,非常的簡單.需要說明的是這樣幾點:

不要給任何元素設定寬度,因為這是一個獨佔一行的列表
在不設定寬度的情況下,可以設定內填充,不會造成任何問題.
要做好隱藏溢出處理,防止標題過長導致折行.

以上是H5行動端各種各樣的列表的製作方法(一)的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。