首頁

web前端

H5教程

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

黄舟

May 28, 2018 pm 04:21 PM

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

前情回顧

在上一篇文章《行動端各種各樣的列表的製作方法(二)》中,我們再通過兩個DEMO,演示了一下在移動端H5中更多需求的列表製作.不過,看起來,好像還蠻簡單的.這一章,接著深入.

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

帶小圖示的清單

上面兩章,我們做了一些普通的清單.而在行動端H5中,我們常常會做一行一個小圖示的清單.這個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=""><i class="ico ico_1"></i>这是一个列表1</a></li>
        <li><a href=""><i class="ico ico_2"></i>这是一个列表2</a></li>
        <li><a href=""><i class="ico ico_3"></i>这是一个列表3</a></li>
        <li><a href=""><i class="ico ico_4"></i>这是一个列表4</a></li>
        <li><a href=""><i class="ico ico_5"></i>这是一个列表5</a></li>
        <li><a href=""><i class="ico ico_6"></i>这是一个列表6</a></li>
        <li><a href=""><i class="ico ico_7"></i>这是一个列表7</a></li>
        <li><a href=""><i class="ico ico_8"></i>这是一个列表8</a></li>
    </ul></p></body></html>

這裡的html程式碼和前面的範例就不太一樣了.這裡我們加了一個i標籤來製作圖示.給每一個i標籤加上不同的class是為了訂位不同的圖示.

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-left: 3rem;            
            position: relative;        
            }
        .ico {            
        display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: 0;top: .8rem;            
        background: #f60;border-radius: 50%;        
        }
    }
}

在這個例子當中,我們採用了定位版面的方式.如果您對定位佈局不是很了解,請閱讀我的博文《Css 詳細解讀定位屬性position 以及參數》.

此外,由於每個圖標都得不一樣,所以我在html中給每一個i標籤都加上了不同的class方便在CSS中呼叫不同的圖示圖片.也就是說,我們使用背景圖片的方式來製作圖示.

SASS是支援循環輸出的,因此,只需要一個循環代碼,就可以將所有的圖標都製作OK了.這裡呢,也需要使用到background-size來處理圖標,關於background-size的使用,本文的上一章中有闡述.這裡不再贅述.

SASS循環,建議在sass入門- sass教程官方網站查看實現方法.這裡不再過多的闡述了.

帶圖示的清單,但是分割線要和文字對齊.

#首先,我們來看效果圖:

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

##這個清單和上面的列表乍看沒什麼不同.但仔細看就會發現,這個分割線是和文字對齊,而不是和圖標對齊的.

不要怪我事兒逼,設計師就是這麼設計的.如果沒有做到的話,設計師很生氣.

html程式碼和上面的DEMO是一致的.這裡不再重複

話不多說,調整css

# SASS程式碼

.list_1 {    
ul {padding-left: 4.6rem;}
    li {        
    border-bottom: 1px solid #ddd;        
    padding-right: 1.6rem;        
    position: relative;        
    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;        
            }
        .ico {            
        display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: -3rem;top: .8rem;            
        background: #f60;border-radius: 50%;        
        }
    }
}

原來在

a上的左填充,給加到ul上面去了.這樣,就可以壓縮li來達到邊線縮小的效果. 而在圖示的處理上,
left值採用了負數,給移到ul的填充上面去.就達到設計效果了.

小結

本章沒有著重去講SASS的循環如何處理,這些都是技術性的問題,參考一下SASS的教程,很快就能學會的.

我這裡假設是使用背景圖片的方法,來實現小圖標的.當然,現在有很多種方法來實現小圖標的製作,比如CSS圖標,比如字體圖標.這些實現方法各有優劣,不是我今天考慮的問題.

本章著重講了以下幾點:

定位佈局.這一點很重要.
靈活的使用各種元素,使用內填充或外填充,來實現你想要的效果.
使用不同的class名稱,來實現不同的小圖示.

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

陳述

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

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

html5是什么意思Apr 26, 2021 pm 03:02 PM

html5是指超文本标记语言（HTML）的第五次重大修改，即第5代HTML。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。

See all articles