首頁

web前端

H5教程

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

黄舟

Mar 10, 2017 pm 04:31 PM

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

#前情回顧

在上一篇文章《移動端各種各樣的列表的製作方法(一)》中,我們通過兩個簡單的DEMO,演示了一下在移動端H5中的列表製作.不過,這兩個演示還是太簡單了.可能大家覺得不過如此嘛.這一章,我們將製作稍微複雜一點點的列表.

如果你是先看到的這篇文章,建議您先去上面的鏈接,把對應的內容給看一下,這樣上下文連貫,更容易理解本文的內容.

帶右箭頭的列表

這個例子,其實和上一張的第二個差不多,只是右邊多了一個右箭頭.我們要實現的效果,如下圖所示:

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>

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;            
            background:url("../image/icon_goto.png") right center no-repeat;            
            background-size: auto 1.4rem;        }
    }
}
}

實作起來也比較簡單,就是給a 加上了一個右箭頭的背景圖片.沒什麼稀罕的.

但這裡需要特別說明的是, background-size其實是可以縮寫到background 裡面去的.但是因為安卓4.4以下不相容,所以,我們目前來說,還是需要拆來來寫.預計,在2016年年底,我們可能就能忽略到所有的老版本的安卓了.但眼下,貌似不行.

它的縮寫程式碼是:

background:url("../image/icon_goto.png") right center/auto 1.4rem no-repeat;

好,第一個demo就這麼輕鬆的完成了.下面我們來做更加複雜一丟丟的.

帶日期的,帶右箭頭的列表

首先,我們來看效果圖:

带日期的,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=""><time>2016.03.14</time>这是一个列表1</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表2</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表3</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表4</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表5</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表6</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表7</a></li>
        <li><a href=""><time>2016.03.14</time>这是一个列表8</a></li>
    </ul></p></body></html>

首先,html5提供了一個time 標籤,用來專門放置時間.我們以往都是使用span或其他標籤來製作.此後,時間有了專門的標籤了.真是意見可喜可賀的事情.

其次,為什麼time標籤在a裡面呢?因為,移動端都是觸摸操作.我們要保證訪客在點擊列表的任意位置都能打開鏈接,因此,a要塊狀化,並且最大化的處理.這點,和我們在PC端製作的時候是很不一樣的.

關於列表日期,我還有一篇老的博文,有興趣可以閱讀一下,《新聞列表中標題和日期的左右分別對齊的幾種處理方法》

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;            
            background:url("../image/icon_goto.png") right center no-repeat;            
            background-size: auto 1.4rem;            
            padding-right: 1.5rem;        }
        time {float: right;color: #999;}
    }
}

並沒有特別複雜,只是為了防止日期和右箭頭重疊,給a 加了一個右內填充.另外,時間使用右浮動法,放到了右邊去了.

小結

相信這兩個DEMO並沒有非常難理解,聰明的你一定是一看就明白了.我們小小的總結一下:

#連結塊狀化,是為了方便行動端的使用者能夠更加方便的點擊到連結
#background-size 的使用方法和簡寫,以及為什麼當下,我們不去簡寫這個屬性.
時間有專門的html5 標籤— time
右邊浮動法,定位右邊的時間

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

陳述

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

理解H5：含義和意義May 11, 2025 am 12:19 AM

H5是HTML5，是HTML的第五個版本。 HTML5提升了網頁的表現力和交互性，引入了語義化標籤、多媒體支持、離線存儲和Canvas繪圖等新特性，推動了Web技術的發展。

H5：可訪問性和網絡標準合規性May 10, 2025 am 12:21 AM

無障礙訪問和網絡標準遵循對網站至關重要。 1）無障礙訪問確保所有用戶都能平等訪問網站，2）網絡標準遵循提高網站的可訪問性和一致性，3）實現無障礙訪問需使用語義化HTML、鍵盤導航、顏色對比度和替代文本，4）遵循這些原則不僅是道德和法律要求，還能擴大用戶群體。

HTML中的H5標籤是什麼？May 09, 2025 am 12:11 AM

HTML中的H5標籤是第五級標題，用於標記較小的標題或子標題。 1)H5標籤幫助細化內容層次，提升可讀性和SEO。 2)結合CSS可定製樣式，增強視覺效果。 3)合理使用H5標籤，避免濫用，確保內容結構邏輯性。

H5代碼：Web結構的初學者指南May 08, 2025 am 12:15 AM

HTML5構建網站的方法包括：1.使用語義化標籤定義網頁結構，如、、等；2.嵌入多媒體內容，使用和標籤；3.應用表單驗證和本地存儲等高級功能。通過這些步驟，你可以創建一個結構清晰、功能豐富的現代網頁。

H5代碼結構：組織內容以實現可讀性May 07, 2025 am 12:06 AM

通過合理的H5代碼結構可以讓頁面在眾多內容中脫穎而出。 1)使用語義化標籤如、、等組織內容，使結構清晰。 2)通過CSS佈局如Flexbox或Grid控制頁面在不同設備上的呈現效果。 3)實現響應式設計，確保頁面在不同屏幕尺寸上自適應。

H5與較舊的HTML版本：比較May 06, 2025 am 12:09 AM

HTML5（H5）與舊版本HTML的主要區別包括：1）H5引入了語義化標籤，2）支持多媒體內容，3）提供離線存儲功能。 H5通過新標籤和API增強了網頁的功能和表現力，如和標籤，提高了用戶體驗和SEO效果，但需注意兼容性問題。

H5與HTML5：澄清術語和關係May 05, 2025 am 12:02 AM

H5和HTML5的區別在於：1）HTML5是網頁標準，定義結構和內容；2）H5是基於HTML5的移動網頁應用，適用於快速開發和營銷。

HTML5特徵：H5的核心May 04, 2025 am 12:05 AM

HTML5的核心特性包括語義化標籤、多媒體支持、表單增強和離線存儲與本地存儲。 1.語義化標籤如、等提高了代碼可讀性和SEO效果。 2.多媒體支持通過和標籤簡化了嵌入媒體內容的過程。 3.表單增強引入了新的輸入類型和驗證屬性，簡化了表單開發。 4.離線存儲和本地存儲通過ApplicationCache和localStorage等提高了網頁性能和用戶體驗。

See all articles