首頁 > 文章 > web前端 > H5行動端各種各樣的列表的製作方法(六)

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

黄舟原創: 2017-03-10 16:44:531560瀏覽

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 class="goods_title">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 class="goods_title">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s" class="goods_photo">
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 class="goods_title">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s" class="goods_photo">
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 class="goods_title">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 class="goods_title">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 class="goods_title">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
            </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

上一篇：H5行動端各種各樣的列表的製作方法(五)下一篇：H5行動端各種各樣的列表的製作方法(五)

看更多