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

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

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

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

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

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

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

タオバオの H5 デザインについては学ぶ価値がたくさんあります。上の写真は淘宝網の Juhuasuan です

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

第 3 章

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

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

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

このことから、3 列レイアウト、5 列レイアウト、および好みの列数はすべて、原則として似たような比率で行われることがわかります。

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

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

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

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

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

概要

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

。複雑な問題を分解し、問題を通して本質を見抜き、問題を部分に分解して解決します。
AはAにもなり得る、AはBにもなり得る、AはA+1にも等しい
パーセンテージ。
パーセンテージを書かずに単独の行で内側と外側のパディングを任意に設定できます
ボーダーはボーダーで実装できるだけでなく、実装方法もたくさんあります
中の魚林源は撤退して網を築いた方が良いかもしれない

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