H5モバイル端末で各種リストを作成する方法（最終7章）

この記事を最初に見た方は、まず上記のリンクにアクセスして、該当するコンテンツをご覧になることをお勧めします。文脈が一貫していて、この記事の内容を理解しやすくなります

いくつかの章を通して、1 行のテキストの最も単純なリストから、画像とテキストのさまざまなリストまで、ほとんどの形式のリストを使用できます。ブログ投稿の 6 つの章で対応するメソッドを見つけてください。メソッドはこれらのメソッドだけであり、それをどのように柔軟に使用するかだけの問題です

したがって、最後の章では、コードは説明しません。しかし、一見言及されていないいくつかのケースを通して、実装方法を分析し、アイデアを与えてください。具体的な実装については、皆さんが考えてください

いくつかのケースを分析してみましょう

個人的には、ブログ記事を書くときはそうしません。追加するのは好きです。ここに挙げられている例は比較的単純なものです。それは、読者がコードを見て核心を理解できるようにするためです。私が表現したい核となる意味を理解してください。より多くの色と影を自分で自由に使用できます

H5モバイル端末での各種リスト作成方法（全7章）タオバオの H5 デザインについては学ぶ価値がたくさんあります。上の写真は淘宝網の Juhuasuan です

上の図に示すように、このリストは実際にはまったく複雑ではありません。

第 3 章

で、前面に小さなアイコンを実装する方法を紹介しました。この場合、実際には大きいアイコンになります。画像の幅は固定されていますが、以下のテキストの幅は固定されていません。アイコンリストと同じですアイデアはまったく同じです。

次のテキストにはさまざまな要素があり、これらの要素はさまざまな方法でタイプセットしてレイアウトできます。タオバオのフロントエンドエンジニアが調べました。素晴らしいドキュメントフローレイアウトを使用しました。個人的には、実装に関しては、配置レイアウト方法を使用するのが好きです。唯一の違いは、それぞれのアイデアです。 4 列の画像レイアウト

上の図に示すように、これはグラフィックとテキストの 4 列のレイアウトです。実際には、2 列のグラフィックとテキストのチュートリアルで同様のチュートリアルが既にあります。 50% を 25% のみに置き換えるだけです。

H5モバイル端末での各種リスト作成方法（全7章）このことから、3 列レイアウト、5 列レイアウト、および好みの列数はすべて、原則として似たような比率で行われることがわかります。

紛らわしいグラフィックとテキストのレイアウト

これは、さまざまなサイズの4つの要素のレイアウトです

H5モバイル端末での各種リスト作成方法（全7章）まず、私たちはそうではありません。デザインのニーズに応じてレイアウト比率を計算し、第 6 章で出てきた方法 (幅と高さをリンクする秘訣) を使用して、植字を行うだけです

ドキュメントフローレイアウトを使用する場合は、比率を計算した後、配置レイアウトを使用することもできます。実際、どんなに複雑なレイアウトであっても、同じ目的を達成することができます。落ち着いて注意深く分析すれば問題の解決策が見つかるようです

上記の解決策が見つかった場合、これは本当に単純すぎます。

概要

H5モバイル端末での各種リスト作成方法（全7章）2

幅と高さ、内側のパディング値をリンクする秘密は、PC では利用できません。この驚くべき機能は、モバイル側のドキュメントフローレイアウトを実際に解決します。業界に数年いるフロントエンドの新人でも、ポジショニングレイアウトを知らないか慣れていませんが、モバイル側では、ポジショニングレイアウトの方が一般的で重要です

以上がH5モバイル端末での各種リスト作成方法（全7章）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。