div＋css佈局入門_CSS/HTML
- WBOY原創
- 2016-05-16 12:11:531314瀏覽
Are you learning CSS layout? Are you still unable to fully master pure CSS layout? There are usually two situations that hinder your learning:
The first possibility is that you have not yet understood the principles of CSS processing pages. Before you consider the overall performance of your page, you should first consider the semantics and structure of the content, and then add CSS for the semantics and structure. This article will tell you how to structure HTML.
Another reason is that you are at a loss for those very familiar presentation layer attributes (such as cellpadding, hspace, align="left", etc.) and don't know what CSS statement to convert them into. Once you have solved the first problem and know how to structure your HTML, I will give you a list detailing what CSS to use to replace the original presentation attributes.
Structured HTML
When we first learn to make web pages, we always consider how to design them first, considering the pictures, fonts, colors, and layout plans. Then we use Photoshop or Fireworks to draw it and cut it into small pictures. Finally, edit the HTML to restore all the designs to the page.
If you want your HTML page to be laid out with CSS (it is CSS-friendly), you need to go back and start over. Don't think about "appearance" first, but first think about the semantics and structure of your page content.
Appearance is not the most important thing. A well-structured HTML page can be presented in any appearance, and CSS Zen Garden is a typical example. CSS Zen Garden helps us finally realize the power of CSS.
HTML is not just for reading on a computer screen. Your carefully designed images in Photoshop may not be displayed on PDAs, mobile phones, and screen readers. But a well-structured HTML page can be displayed anywhere and on any network device through different definitions of CSS.
Start thinking
First of all, you need to learn what "structure" is, which some writers also call "semantics". What this term means is that you need to analyze your content blocks and the purpose each piece of content serves, and then build the corresponding HTML structure based on these content purposes.
If you sit down and carefully analyze and plan your page structure, you might end up with a few pieces like this:
Logo and site name
Main page content
Site navigation ( Main menu)
Submenu
Search box
Ritual area (such as shopping cart, checkout)
Footer (copyright and related legal notices)
We usually use DIV elements to combine these structures Define it like this:
これはレイアウトではなく、構造です。これはコンテンツ ブロックの意味論的な記述です。構造を理解したら、対応する ID を DIV に追加できます。 DIV コンテナ内には任意のコンテンツ ブロックを含めることができ、その中に別の DIV をネストすることができます。コンテンツ ブロックには、タイトル、段落、画像、表、リストなど、あらゆる HTML 要素を含めることができます。
上記によると、HTML の構造化方法はすでにわかりましたので、レイアウトとスタイルを定義できるようになりました。各コンテンツ ブロックはページ上のどこにでも配置でき、ブロックの色、フォント、境界線、背景、配置プロパティなどを指定できます。
セレクターの使用は素晴らしいことです
ID の名前は、特定のコンテンツ ブロックを制御する手段です。このコンテンツ ブロックを DIV で囲み、一意の ID を追加することで、CSS を使用して選択することができます。タイトル、リスト、画像、リンク、段落などの各ページ要素の外観を正確に定義するコンバーター。たとえば、#header の CSS ルールを作成する場合、それは #content の画像ルールとはまったく異なるものになる可能性があります。
もう 1 つの例は、異なるルールを通じて異なるコンテンツ ブロックにリンク スタイルを定義できることです。このようなもの: #globalnav a:link または #subnav a:link または #content a:link異なるコンテンツ ブロック内の同じ要素に異なるスタイルを定義することもできます。たとえば、#content p と #footer p を通じて、それぞれ #content と #footer の p のスタイルを定義します。構造的に言えば、ページは画像、リンク、リスト、段落などで構成されます。これらの要素自体は、どのネットワーク デバイス (PDA、携帯電話、またはインターネット TV) に表示されるかには影響しません。これらは、任意のパフォーマンスの外観として定義できます。
注意深く構造化された HTML ページは非常にシンプルで、すべての要素が構造的な目的で使用されます。段落をインデントする場合は、blockquote タグを使用する必要はありません。p タグを使用し、CSS マージン ルールを p に追加するだけで、インデントの目的を達成できます。 p は構造化タグ、margin はプレゼンテーション属性です。前者は HTML に属し、後者は CSS に属します。 (これは、構造とプレゼンテーションの分離です。)
適切に構造化された HTML ページには、プレゼンテーション属性タグはほとんどありません。コードは非常にクリーンで簡潔です。たとえば、元のコード