H5モバイル端末での各種リスト作成方法⑥
H5モバイル端末で各種リストを作成する方法(6)
そして、Android 4.4 以下およびいくつかの愚かな国内モバイル ブラウザと互換性を持たせるために、実際にはこの記事を最初に見た場合は、まず上記のリンクにアクセスして、文脈がわかるように該当するコンテンツをご覧になることをお勧めしますこの記事の内容をわかりやすく説明します。前の 2 つの章では、グラフィック リストの 2 列レイアウトについて説明しました。実際、この章では、グラフィック リストの 2 列レイアウトについて説明します。さらに一歩進んで、比較的複雑なレイアウト メソッドを実装します
calcvhvw を放棄します。 code><code>css3
の最新の属性を待ちます。このレイアウトを実現するには、比較的単純なパラメーターのみを使用します。
複雑なグラフィックとテキストのリスト
ただし、この部分は比較的複雑です。これは非常に一般的です。まず最終的なレンダリングを見てみましょうcalcvhvw
等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/imghw/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/imghw/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/imghw/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/imghw/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/imghw/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/imghw/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
上の図に示すように、これは、いつどのような DOM フレームワークを構築するかはわかりませんが、比較的複雑な画像とテキストのリストとみなすべきです。このレイアウトが表示されます。
これは私が考えたものです。バックエンドが便利に出力するには、これらの 6 つの製品が統一された形式を持つ必要があります。したがって、私の HTML コードは次のとおりです。の使用については、上記のブログ投稿を参照して、各セレクターの意味や配置レイアウトなどを理解してください。html コード h3>rrreee ご覧のとおり、この HTML 構造では、li に異なるクラスを追加していません。実際、バックエンドが出力するときに、異なるクラスが出力される可能性があります。そのため、ここでは純粋なクラスのみを記述します。ちなみに、以前のブログ記事「CSS3 の nth-child セレクターの詳細な説明」を参照してください。
SASS コード
rrreee
以前のブログ記事「純粋な CSS 実装」の「共通レイアウト」を参照してください。モバイル端末で使える高さと幅の連動の秘密」で、このレイアウトの実装方法を説明しました。その記事の公開後、「このレイアウトではどうやってコンテンツを配置するのですか?」と質問されましたが、まだ理解できていませんでした。彼が私の記事を読んで理解したかどうかはわかりませんが、ここでは詳しく説明しませんので、自分で読んで分析してください。 nth-child
clac
vw
vh
概要
。この章の焦点は次のとおりです
hello world
- CSS で要素の高さと幅のフックを実装する方法🎜
- 🎜レイアウトの配置は非常に重要です🎜🎜
- 🎜
nth -child
は、実際には非常に強力な CSS セレクターです。特定のプロジェクトでの使用方法🎜🎜🎜🎜🎜🎜強調: 🎜 (1.) Android 4.4 以下および一部の国内モバイル ブラウザは 🎜 などの最新の CSS 属性をサポートしていないため、この記事の方法では、従来の CSS 手法を使用して問題を解決します。 (2.) この一連の記事では、モバイル端末に関する私の経験と洞察を段階的に説明する予定です。最初の章を読んだ後、「これは簡単すぎる、質問したい」と叫ぶ人もいました。どのプログラミングの本でも 🎜 から始まります。とても簡単ですよね?🎜🎜。
以上がH5モバイル端末での各種リスト作成方法⑥の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
