So erstellen Sie verschiedene Listen auf dem H5-Mobilterminal (5)

Vorherige Rezension

《So erstellen Sie verschiedene Listen auf dem H5-Mobilterminal Produktionsmethode (1) 》
《So erstellen Sie verschiedene Listen auf dem H5-Mobilterminal (2)》
《So erstellen Sie verschiedene Listen auf dem H5-Mobilterminal (3)》
《So erstellen Sie verschiedene Listen auf dem H5-Mobilterminal (4 )》

Wenn Sie diesen Artikel zuerst gesehen haben, wird empfohlen, dass Sie zuerst auf den Link oben gehen und den entsprechenden Inhalt lesen. Dadurch wird der Kontext kohärent und der Inhalt dieses Artikels leichter verständlich.

In Kapitel 4 haben wir gelernt, wie man eine zweispaltige Bild- und Textliste erstellt. Es gibt jedoch bestimmte Einschränkungen. Die Einschränkung besteht darin, dass die Bilder quadratisch sein müssen.

In der Praxis ist dies jedoch nicht ausreichend. Beispielsweise werden die Bilder nicht geladen wird verformt, wenn das Bild nicht geladen wird.

Gewöhnliche zweispaltige Bild- und Textliste (die Bildgröße ist nicht begrenzt und das Bild wird vor dem Laden nicht verformt)

Es gibt immer noch viele Werfen wir einen Blick auf die tatsächlichen Renderings. Schauen wir uns diesen Effekt an. Aber es gibt ein paar wichtige Punkte HTML-Code

HTML-Code So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (5)

Der Code in diesem Beispiel unterscheidet sich vom Code im vorherigen Artikel, in dem alle Bilder quadratisch sind. Wie Sie sehen können, habe ich eine Ebene hinzugefügt

Verschachtelung für das

-Tag. Es wird verwendet, um das Bild zu platzieren und einen übergeordneten Rahmen bereitzustellen

<!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 3</title><link rel="stylesheet" href="../style/style.css">
</head>
<body>
<p class="list_3">
    <ul>
        <li>
            <a href="">
                <p class="goods_photo">
                    <img src="../image/1.jpg" alt="这里是商品标题1">
                </p>
                <h4 class="goods_title">这里是商品标题1</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <p class="goods_photo">
                    <img src="../image/2.jpg" alt="这里是商品标题2">
                </p>
                <h4 class="goods_title">这里是商品标题2</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <p class="goods_photo">
                    <img src="../image/3.jpg" alt="这里是商品标题3">
                </p>
                <h4 class="goods_title">这里是商品标题3</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <p class="goods_photo">
                    <img src="../image/4.jpg" alt="这里是商品标题4">
                </p>
                <h4 class="goods_title">这里是商品标题4</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
    </ul></p></body></html>

Nach dem Login kopieren

SASS-Code

imgpHier fügen wir diesen Code

zum

-Feld hinzu, um ein quadratisches Feld zu bilden, das sich mit der Breite des Geräts ändert. Wenn Sie es nicht verstehen, können Sie sich auf meinen vorherigen beziehen Blogbeitrag „Reines CSS zur Implementierung gängiger Layouts auf mobilen Endgeräten – das Geheimnis von Höhen- und Breiten-Hooks“.

.list_3 {    ul {        @extend .cf; // 引用清理浮动代码片,看不懂请看本人scss相关教程
        li {            width: 50%;float: left;padding: 1rem 0;
            outline: 1px solid #ddd;  // 使用 outline 模拟边框 (outline不占据盒子模型)
            background: #fff;  // 使用白色背景颜色,防止 outline 重叠造成 2px 线条
            a {                
            display: block;
                text-decoration: none; // 去除默认下划线
            }            
            .goods_title,.goods_price {                
            padding: 0 1rem; // 加上左右内填充,防止文字和边框粘结
                text-align: center;
            }            
            // 和上一章最大的差异在这里.
            .goods_photo {                
            width: 100%;padding-bottom: 100%;position: relative;
                img {                    
                // 限制图片最大宽高,保持不变形
                    max-width: 80%;max-height: 80%;display: block;
                    // 未知宽高块级元素水平且垂直局中代码
                    position: absolute;top: 50%;left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}// 全站范围内用到的图文基本样式.goods_title,.goods_price {    
display: block;position: relative;
    @include ts(); // 引用文字描白边代码片
    @include online(1.8rem); // 引用文字超出一行省略号代码片}
    .goods_title {color:#000;font-size: 1.2rem;}
    .goods_price {color:#f60;font-size: 1.5rem;font-weight: bold;}

Nach dem Login kopieren

Zusammenfassung

.goods_photoIm vorherigen Kapitel haben wir ein doppeltes Spaltenlayout implementiert und simuliert width: 100%;padding-bottom: 100%;position: relative; Ränder usw. In diesem Kapitel werden hauptsächlich die folgenden Wissenspunkte hervorgehoben:

Wie CSS die Höhen- und Breiten-Hooks von Elementen implementiert.1px

Wie CSS Bilder verkleinert.
So implementieren Sie die horizontale und vertikale Zentrierung von Elementen auf Blockebene unbekannter Größe.
Hervorhebung

(1.) Android 4.4 und niedriger sowie einige inländische mobile Browser unterstützen nicht die neuesten CSS-Attribute wie

. Daher besteht die Methode in diesem Artikel darin, herkömmliche CSS-Techniken zu verwenden, um das Problem zu lösen. (2.) In dieser Artikelserie möchte ich einige meiner Erfahrungen und Erkenntnisse zum mobilen Endgerät Schritt für Schritt erläutern. Einige Leute riefen nach der Lektüre des ersten Kapitels aus: „Das ist zu einfach.“ fast jedes Programmierbuch. Es beginnt mit
. Ist das nicht alles sehr einfach?

Das obige ist der detaillierte Inhalt vonSo erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (5). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!