ステップ 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">
#page-container {
width: 760px;
background: red;
}HTML ID が page-container であるボックスの幅を 760px に制御し、背景を赤にします。パフォーマンスは次のとおりです
次に、ボックスを中央に配置するために、margin: auto; と記述し、CSS ファイルは次のようになります。
background: red;
これで、ボックスの上部とブラウザーの間に 8 ピクセルの幅の隙間があることがわかります。これは、ブラウザのデフォルトのパディングと境界線が原因です。このギャップを解消するには、CSS ファイルに次のように記述する必要があります。