H5移动端各种各样的列表的制作方法(六)

如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.

在前面两章中,讲的都是两列布局的图文列表.而事实上,两列布局的图文列表还是比较简单的.这一章,我们将要更进一步来挑战难度.实现一个相对来说,非常复杂的布局方式.

并且,为兼容安卓4.4以下,以及部分傻逼国产移动端浏览器.我们将在实践中,放弃calc\vh\vw等css3最新属性.只使用比较简单的参数,来实现这个布局.

复杂图文混排列表

这部分是比较复杂的,但是,特别特别的常见.我们先来看一下最终效果图.

复杂图文混排列表

如上图所示,这应该算是一个比较复杂的图文列表了.不知道你看到这个布局,你会构建怎么样的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

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