DIV css の構造
CSS レイアウトを学習していますか?まだ純粋な CSS レイアウトを完全にマスターできていませんか?通常、学習を妨げる状況は 2 つあります:
1 つ目の可能性は、CSS ページ処理の原則をまだ理解していないことです。ページの全体的なパフォーマンスを考慮する前に、まずコンテンツのセマンティクスと構造を検討し、次にセマンティクスと構造用の CSS を追加する必要があります。この記事では、HTML を構造化する方法について説明します。
もう 1 つの理由は、非常によく知られたプレゼンテーション層の属性 (cellpadding、hspace、align="left" など) について困惑しており、それらをどの CSS ステートメントに変換すればよいかわからないことです。 最初の問題を解決し、HTML の構造化方法を理解したら、元のプレゼンテーション属性を置き換えるためにどの CSS を使用するかを詳しく説明したリストを提供します。
構造化 HTML
初めて Web ページの作成を学ぶとき、私たちは常に最初に、画像、フォント、色、レイアウト計画を考慮して、どのようにデザインするかを検討します。次に、Photoshop または Fireworks を使用してそれを描画し、小さな絵に切り取ります。最後に、HTML を編集して、すべてのデザインをページに復元します。
HTML ページを CSS でレイアウトしたい場合 (CSS フレンドリーです)、「外観」を最初に考えるのではなく、セマンティクスと構造を最初に考える必要があります。ページのコンテンツの。
最も重要なのは外見ではありません。適切に構造化された HTML ページは、どのような外観でも表示できます。CSS Zen Garden はその典型的な例です。 CSS Zen Garden は、CSS の力を最終的に認識するのに役立ちます。
HTML はコンピューター画面上で読むためだけのものではありません。 Photoshop で慎重にデザインした画像は、PDA、携帯電話、スクリーン リーダーでは表示されない場合があります。ただし、適切に構造化された HTML ページは、CSS のさまざまな定義を使用して、どこにでも、どのネットワーク デバイスでも表示できます。
考え始めます
まず、「構造」とは何かを学ぶ必要があります。これを「意味論」と呼ぶ作家もいます。この用語が意味するのは、コンテンツ ブロックと各コンテンツが果たす目的を分析し、これらのコンテンツの目的に基づいて対応する HTML 構造を構築する必要があるということです。
じっくりとページ構造を分析して計画すると、次のようないくつかの部分が完成するかもしれません:
ロゴとサイト名
メイン ページのコンテンツ
サイト ナビゲーション (メイン メニュー)
サブメニュー
検索ボックス
機能領域 (ショッピング カート、チェックアウトなど)
フッター (著作権および関連する法的通知)
通常、次のような DIV 要素を使用してこれらの構造を定義します。 🎜>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
