CSSフラットブログ学習まとめ(1)モジュール分析_html/css_WEB-ITnose

1. モジュール分析

1. プロジェクトを開発する前に、まずプロジェクトの大まかな計画、プロジェクトにどのような機能が含まれるか、および具体的な要件を作成する必要があります。

2. したがって、これらを具体化し、問題をモジュール化し、要件をマクロに理解するために、モジュール分析を行う必要があります。

3. モジュールの概念を理解したら、モジュールをさらに小さなモジュールに細分化し、1 つずつ倒します。

モジュール分析を行わないことによる悪影響:

モジュール分析を行わないと、開始するとすぐに自分自身に目がくらみ、全体像が見えなくなりやすくなります。やっているうちにコントロールを失うことに気づきます。ところどころ矛盾があるので修正コストが非常にかかるので、一旦壊して書き直した方が良いでしょう。

初心者は細部に集中しやすいので、最初に細部から始めるべきではありません。

2. 全体的な分析

最初にページ分析を行います:

1.body には、ページラッパーとメニューのみが含まれます。

2.page-wrapper には、バナー、1、 2、3、CTA。

3. コンポーネント分析

1. ヘッダーの下に h1 と nav が 1 つだけあり、nav の下に ul、ul に li、in があることが最適です。 li. 現在、a タグは 1 つだけですが、将来の拡張性を考慮すると、まだ柔軟に記述する必要があります。

3. バナーにはインナーが含まれており、インナーには p、ul、li、および a ボタンが含まれています。コンテンツがあふれないようにコンテンツを配置します。 div の下にヘッダーがあり、ul の下に同じレベルの 3 つの写真があります

5.two の下に 3 つのセクションがあり、各セクションには画像とコンテンツ領域があります

6 の下に内部 div があります。 .three, div

7.cta にはヘッダーと 6 つの div があります

8 の下には 2 つのスパンがあります。