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

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

#在前面兩章中,講的都是兩列佈局的圖文列表.而事實上,兩列佈局的圖文列表還是比較簡單的.這一章,我們將要更進一步來挑戰難度.實現一個相對來說,非常複雜的佈局方式.

並且,為兼容安卓4.4以下,以及部分傻逼國產移動端瀏覽器.我們將在實踐中,放棄calc\vh\vw等css3最新屬性.只使用比較簡單的參數,來實現這個佈局.

複雜圖文混排列表

這部分是比較複雜的,但是,特別特別的常見.我們先來看一下最終效果圖.

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

#如上圖所示,這應該算是一個比較複雜的圖文列表了.不知道你看到這個佈局,你會構建怎麼樣的DOM框架.

#我是這樣考慮的.為了後端能夠方便的輸出,這六個產品,必須格式統一.因此,我的HTML程式碼如下:

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 4</title><link rel="stylesheet" href="../style/style.css">
</head>
<body>
<p class="list_4">
    <ul>
        <li>
            <a href="goods/goods.html">
                <!-- 只有第一个有这个热售,其他的木有!~ -->
                <i class="goods_words">热售</i>
                <h3 id="苹果iPhone-s">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghwm/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s" >
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 id="苹果iPhone-s苹果iPhone-s苹果iPhone-s苹果iPhone-s">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghwm/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s" >
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 id="苹果iPhone-s苹果iPhone-s苹果iPhone-s苹果iPhone-s">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghwm/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s" >
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 id="苹果iPhone-s苹果iPhone-s苹果iPhone-s苹果iPhone-s">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghwm/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s" >
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 id="苹果iPhone-s">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghwm/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s" >
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 id="苹果iPhone-s">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghwm/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s" >
            </a>
        </li>
    </ul></p></body></html>

可以看到,在這個HTML結構中,我並沒有給li加上不同的class.而事實上,在後端輸出的時候,是可以輸出不同的class的.但這回使事情複雜.因此,在這裡,我們就只輸出純的程式碼.順便,溫習一下我之前的博文《css3的nth-child選擇器的詳細探討》.

SASS代碼

.list_4 {
    margin-top: 0.8rem;background:#fff;border-top: 1px solid #ddd;
    ul {@extend .cf;}
    li {
        background:#fff;outline: 1px solid #ddd;
        &:nth-child(-n+3) {
            width: 50%;height: 0;position: relative;
            a {display: block;position: absolute;left: 0;top: 0;height: 0;width: 100%;}
            .goods_photo {display: block;position: absolute;right:0.5rem;}
            .goods_title,.goods_info,.goods_price {z-index: 2;width: 60%;}
        }
        &:nth-child(1) {
            float: left;padding-bottom: 55%;
            a {padding-bottom: 110%;}
            .goods_photo {width: 50%;bottom: 5%;}
            .goods_title,.goods_info,.goods_price,.goods_words {margin-left: 1.6rem;}
            .goods_words {margin-top: 1.6rem;}
        }
        &:nth-child(n+2):nth-child(-n+3) {
            float: right;padding-bottom: 27.5%;
            a {padding-bottom: 55%;}
            .goods_photo {height: 70%;top: 15%;}
            .goods_title,.goods_info,.goods_price,.goods_words {margin-left: 1.2rem;}
            .goods_title {margin-top: 1.6rem;}
        }
        &:nth-child(n+4) {
            width: 33.3%;float: left;
            a {display: block;padding: 1rem;}
            .goods_photo {width: 70%;max-width: 15rem;margin: 0.5rem auto 0;display: block;}
        }
    }
}

// 全站范围内用到的图文基本样式
.goods_words {
    display:inline-block;
    padding:0.3rem 0.5rem;border-radius: 0.3rem;background:#f60;color:#fff;font-size: 1.2rem;margin-bottom: 0.5rem;
}
.goods_title,.goods_price,.goods_info {
    display: block;position: relative;
    @include ts(); // 引用文字描白边代码片
    @include online(1.8rem); // 引用文字超出一行省略号代码片
}
.goods_title {color:#000;font-size: 1.2rem;}
.goods_info {color:#999;font-size: 1.2rem;}
.goods_price {color:#f60;font-size: 1.5rem;font-weight: bold;}

在我之前的一篇博文《純CSS實現行動端常見佈局－高度和寬度掛鉤的秘密》裡面,我就是講解的這個佈局的實現方法.在那篇文章的發布之後,有人問我,你這樣佈局,裡面的內容怎麼排布呢?我說用定位佈局,他還是沒聽明白.不知道看到我這篇文章之後,明白了沒有.

具體程式碼是什麼意思,我這裡就不詳細解釋了.自己看了分析吧.重點是nth-child的使用,可以參考我上面的博文,理解我每一個選擇器是什麼意思.以及,定位佈局等.

小結

這一章的重點有

CSS如何實現元素的高度和寬度掛鉤.
定位佈局,相當的重要
nth-child 實在是一個非常強大的CSS選擇器,在具體專案中,怎麼使用它.

強調:
(1.)安卓4.4以下和部分國產行動端瀏覽器不支援clac\ vw \ vh 等最新的CSS屬性.因此,文中的方法是使用傳統CSS中的技巧解決.
(2.)本系列文章我準備循序漸經的講解移動端的一些我的經驗見解.某些人看了第一章就驚呼,這也太簡單了.我想反問一句,幾乎任何編程書籍都是從hello world開始的.是不是也都是很簡單呢?

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

陳述

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

HTML5：標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等，提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

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.避免常見錯誤，如標籤未閉合，確保代碼有效性。