行動端html5列表的製作方法-H5教程-PHP中文網

行動端html5列表的製作方法

一个新手

發布： 2017-09-06 10:21:19

原創

2064 人瀏覽過

前言

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

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

最簡單的列表

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

行動端html5列表的製作方法

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

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;}
    }
}
这里的单位全部使用的是,我们里面,已经将的字体大小设置为了,也就相当于正常情况下的10px.也就是说,上面的相当于.至于为什么这么写,请到本文开头的链接里面查看前面我写的文章中的解释. 
不会sass的,请先阅读sass相关教程.不要觉得难,一个小时保证学会,两天能玩的非常溜.

登入後複製

還是一個簡單的列表

首先,我們來看效果圖:

行動端html5列表的製作方法

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

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

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上,就可以了.

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