So erstellen Sie verschiedene Listen auf dem mobilen H5-Terminal (6)
Wenn Sie diesen Artikel zuerst gesehen haben, wird empfohlen, dass Sie zuerst den oben genannten Link aufrufen. Schauen Sie sich den entsprechenden Inhalt an, damit der Kontext kohärent ist und der Inhalt dieses Artikels leichter zu verstehen ist. In den ersten beiden Kapiteln haben wir über ein zweispaltiges Layout gesprochen Aber die Fakten oben: Das zweispaltige Layout der Bild- und Textliste ist relativ einfach. In diesem Kapitel gehen wir noch einen Schritt weiter, um eine relativ komplexe Layoutmethode zu implementieren
Darüber hinaus ist es mit Android 4.4 unten sowie einigen dummen inländischen mobilen Browsern kompatibel. In der Praxis werden wir die neuesten Attribute von
und anderen
aufgeben. Verwenden Sie nur relativ einfache Parameter, um dieses Layout zu erreichen .
Komplexe Grafik- und Textmischungstabelle calcvhvwcss3 Dieser Teil ist komplizierter, aber er ist sehr häufig anzutreffen
Wie im Bild oben gezeigt, sollte dies als eine relativ komplizierte Liste von Bildern und Texten betrachtet werden. Ich weiß nicht, welche Art von DOM-Framework Sie erstellen werden, wenn Sie dieses Layout sehen
Um die Ausgabe des Backends zu erleichtern, müssen diese sechs Produkte ein einheitliches Format haben. Daher lautet mein HTML-Code wie folgt: 
HTML-Code
Wie Sie sehen können, habe ich in dieser HTML-Struktur keine verschiedenen Klassen hinzugefügt. Tatsächlich können bei der Ausgabe im Backend unterschiedliche Klassen ausgegeben werden Geben Sie reinen Code aus. Sehen Sie sich übrigens an, was ich zuvor gesagt habe. Der Blog-Beitrag „Detaillierte Diskussion des n-ten-Kind-Selektors in CSS3“.
SASS-Code
<!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>Nach dem Login kopieren
In meinem vorherigen Blog Beitrag „Reines CSS implementiert gängige Layouts auf mobilen Endgeräten – Höhe“ In „Geheimnisse im Zusammenhang mit der Breite“ habe ich die Implementierungsmethode dieses Layouts erklärt. Nach der Veröffentlichung dieses Artikels fragte mich jemand, wie es geht, wenn Sie es so gestalten Sie ordnen den Inhalt darin an? Ich habe gesagt, ich solle das Positionierungslayout verwenden, aber ich weiß immer noch nicht, ob Sie verstehen, was der spezifische Code von
bedeutet Ich werde es hier nicht im Detail erklären. Der entscheidende Punkt ist, dass Sie auf meinen Blog-Beitrag oben verweisen können, um zu verstehen, was jeder meiner Selektoren bedeutet. usw.
.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;}Nach dem Login kopieren
Zusammenfassung
Die wichtigsten Punkte dieses Kapitels sind
nth-child
Wie CSS den Höhen- und Breiten-Hook von Elementen implementiert.
Das Positionierungslayout ist sehr wichtig- Es ist wirklich ein sehr leistungsfähiger CSS-Selektor
-
nth-childHervorhebung
:
(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: „Ich möchte eine Frage stellen.“ 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 (6). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
