CSS レイアウト_html/css_WEB-ITnose についての話-htmlチュートリアル-php.cn

CSS レイアウト_html/css_WEB-ITnose についての話

WBOY

リリース： 2016-06-24 11:50:59

オリジナル

1075 人が閲覧しました

はじめに

このレイアウトは断面図に基づいて HTML ページに変換していますが、導入の目的はこの特定の例に限定されるものではなく、その後のすべてのレイアウトプロセスに使用できます。

始める前に、道を誤ったり、迷走したり、過度に毒されたりすることを防ぐために、いくつかのガイドラインが必要です。

一度に 1 つのステップを実行し、一連のブラウザを使用してそれぞれをテストします。ステップレイアウトの最初のステップを踏むのは簡単ですが、途中で問題が発生することは予想外です。このような事態を避けるために、私たちが行うすべてのステップは一連のブラウザーでテストされます。こうすることで、レイアウトがどのようになっているのかを明確に確認でき、いくつかの問題を回避できます。

最新のブラウザに基づいて構築するが、上位互換性も持たせる標準に準拠したブラウザに基づいてレイアウトを構築することが最善ですが、一部の古いブラウザとの互換性も確保します。

HTML コードと CSS を確認する多くのレイアウトの問題を解決できるように、HTML コードと CSS を頻繁に確認します。

次の 2 つのアドレスが役に立ちます:
① WC3 HTML バリデーター
② WC3 CSS バリデーター

ステップ 1. ブラウザーのサポートを検討してください:

CSS レイアウトの設計を開始する前に、必要なブラウザーについて検討する必要があります。サポートするか、またはどの程度サポートしたいか。顧客、ユーザー、テストログファイルなどが役立つかもしれません。

ステップ 2. コンテナーのレイアウトを表示する

デザインを見て、主にどのコンテナーで構成されているかを考えます。

ステップ 3. コンテナーに名前を付ける

上記のコンテナーは、ページレイアウト内でコンテンツが配置されるコンテナーとなるため、

コンテナー

ヘッダー

のような名前を付ける必要があります。 mainnav

contents

footer

これらのコンテナがページに固有である場合は、クラスの代わりにタグコードの最後に ID を使用します。これは、他の要素のスタイルを記述するときに重要です。競合が発生すると、ID で識別されるスタイルがクラスで識別されるコードをオーバーライドするためです。

Step4. スタイルとコードを書き始めます

ここではHTML4.01strict

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">

ログイン後にコピー

を使用します

その後、ヘッダー情報や文字エンコーディングなどを追加し、外部スタイルにstyle.css

    <head>    <meta http-equiv="content-type" content="text/html; charset=utf-8">    <title>Page title</title>    <link rel="stylesheet" href="style.css" type="text/css" media="screen">    <!--[if IE 6]>    <link rel="stylesheet" href="ie6.css" type="text/css" media="screen">    <![endif]-->    </head>

ログイン後にコピー

を付けます

最後に、上で分析した要素のいくつかを追加します:

    <body>    <div id="container">    <div id="header" title="sitename">    <div id="skipmenu"><a href="#content">Skip to content</a></div>    <h1>    Sitename    </h1>    </div>    <div id="mainnav">    <ul>    <li><a href="#">Section 1</a></li>    <li><a href="#">Section 2</a></li>    <li><a href="#">Section 3</a></li>    <li><a href="#">Section 4</a></li>    </ul>    </div>    <div id="menu">    <h3>    Archives    </h3>    <ul>    <li><a href="#">December 2014</a></li>    <li><a href="#">November 2014</a></li>    <li><a href="#">October 2014</a></li>    <li><a href="#">September 2014</a></li>    <li><a href="#">August 2014</a></li>    </ul>    <h3>    Last 10 Entries    </h3>    <ul>    <li><a href="#">Entry 120 (4)</a></li>    <li><a href="#">Entry 119 (0)</a></li>    <li><a href="#">Entry 118 (9)</a></li>    <li><a href="#">Entry 117 (3)</a></li>    </ul>    </div>    <div id="contents">    <div class="blogentry">    <h2>    <a href="#" title="Permanent link to this item">Heading here</a>    </h2>    <h3>    Sunday, 24 August 2014    </h3>    <p>    <img class="imagefloat" src="flower.jpg" alt="" width="100" height="100">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet     dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper      suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Duis autem vel eum</a> iriure dolor      in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero      eros et accumsan et iusto odio dignissim qui blandit praesent.    </p>    <p>    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.    </p>    <ul>    <li><a href="#">Comments (4)</a></li>    <li><a href="#">Pingbacks (1)</a></li>    <li>Category: <a href="#" title="Category">CSS</a></li>    </ul>    </div>    </div>    <div id="footer">    Copyright &copy; <a href="http://www.wenboxz.com" target="_blank">文波の小站</a> 2014,All Rights Reserved.    </div>    </div>    </body>

ログイン後にコピー

Step6. スタイルを指定します

    body    {    margin: 0;    padding: 0;    background: #ddd;    }         #container    {    margin: 1em auto;    width: 650px;    background: #fff;    }         #header { background: #CF3; }    #mainnav { background: #9F3; }         #menu    {    float: right;    width: 165px;    background: #6F9;    }         #contents    {    float: left;    width: 440px;    background: #9FC;    margin: 0 0 0 20px;    }         #footer    {    clear: both;    background: #FF9;    }

ログイン後にコピー