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：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee