css+div を使用して Web サイトを構築する 10 のステップ (1 または 2 ステップ)_html/css_WEB-ITnose

ステップ 1: Web サイトを計画する このチュートリアルでは、Web サイトを構築するための例として説明します。バー、ボタンの特殊効果付き。

幅: 760px 高さ: 50px

2.Header Web サイトのロゴとサイト名を含む Web サイトのヘッダー アイコン。

幅: 760px 高さ: 150px

3. コンテンツ Web サイトのメインコンテンツ。

幅: 480px 高さ: コンテンツに応じて変更します

4.サイドバーの境界線、いくつかの追加情報。

幅: 280px 高さ: コンテンツによって変わります

5.フッター ウェブサイトの下部バーには著作権情報などが表示されます。

幅: 760ピクセル 高さ: 66ピクセル。

ステップ 2: HTML テンプレートとファイル ディレクトリを作成します。

1."http://www .w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

それをindex.htmlとして保存し、フォルダーcss、imagesを作成します、ウェブサイトの構造は次のとおりです


2. ウェブサイト用の大きなボックスを作成します。つまり、ウェブサイトのすべての要素が含まれる幅 760 ピクセルのボックスを作成します。


HTML ファイルの と の間に

CSS を作成します。 master.css という名前のファイルは /css/ フォルダーに保存されます。書き込み:

#page-container {

width: 760px;

background: red;

}

HTML ID が page-container であるボックスの幅を 760px に制御し、背景を赤にします。パフォーマンスは次のとおりです

次に、ボックスを中央に配置するために、margin: auto; と記述し、CSS ファイルは次のようになります。
background: red;

}

これで、ボックスの上部とブラウザーの間に 8 ピクセルの幅の隙間があることがわかります。これは、ブラウザのデフォルトのパディングと境界線が原因です。このギャップを解消するには、CSS ファイルに次のように記述する必要があります。