Div+CSSレイアウト入門チュートリアル(2.全体のレイヤー構成とCSSを書く)_html/css_WEB-ITnose

Div+CSS布局入门教程 (2.写入整体层结构与CSS)

接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：

这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。

 

下面，我们在标签对中写入DIV的基本结构，代码如下：

将来コードを読みやすくするために、関連するコメントを追加する必要があります。次に、css.css ファイルを開いて、CSS 情報を次のように記述します。

/*基本情報*/

body {

font:12px Tahoma;

margin:0px;

text-align:center;

background:#FFF;

}

/*ページレイヤーコンテナ*/
#container {
width:100%
}

/ * ページヘッダー*/

#Header {

width:800px;
margin:0 auto;
height:100px;
background:#FFCC99

}

/*ページ本文*/
#PageBody {
width:800px;
margin:0 auto;
height:400px;
background:#CCFF00

}

/*ページの下部*/
#Footer {
width:800px;
margin:0 auto;
height:50px;
background:#00 FFFF

}

上記のファイルを保存し、ブラウザで開くと、この時点でページの基本構造が表示されています。

上記の CSS の手順 (詳細については、オンラインでダウンロードできる CSS2.0 の中国語マニュアルを参照してください):

1. 良いコメントの習慣を身につけてください。これは非常に重要です。 body は HTML 要素です。ページ上のすべてのコンテンツはこのタグ ペア内に記述する必要があります。これ以上は説明しません。

font:12px Tahoma;

略語は次のとおりです。ここで使用する場合、完全なコードは次のようになります: font-size:12px; font-family:Tahoma; 説明のフォントは 12 ピクセルで、フォントは Tahoma 形式です。コードは次のようにする必要があります:

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px

または

margin:0px 0px 0px 0px

順序は上/右/下/左です, margin :0 (省略形); と書くこともできます

上記のスタイルの説明は、ボディ部分の上下左右の余白が 0 ピクセルであることを意味します。auto を使用すると、余白は自動的に調整されます。

以下の記述方法もあります:

margin:0px auto;

説明 上下のマージンは 0px で、左右のマージンは自動的に調整されます

今後使用するパディング属性には多くの類似点があります。マージンは同じですが、意味が異なります。マージンは外部距離であり、パディングは内部距離です。

text-align:center

テキストの配置は左、右、中央に設定できます。ここでは中央配置に設定します。

background:#FFF

ここでは背景色を白に設定します。完全な色は、background:#FFFFFF になります。
背景は、指定したレイヤーを背景色と背景画像で埋めるために使用できます。将来的には次の形式を使用します。
背景:#ccc url('bg.gif') 左上 no-repeat; を意味します。 #CCC(グレースケールカラー) はレイヤー全体を塗りつぶします。bg.gif を背景画像として使用します。

左上

は画像が現在のレイヤーの左上端に配置されることを意味します。no-repeatは画像サイズのみを意味します。レイヤー全体を埋めずに表示されます。
top/right/left/bottom/center

は、背景画像を配置するために使用されます。つまり、それぞれ、top/right/bottom/left/center を使用することもできます。

X シートを意味します。マークは 20 ピクセル、Y 座標は 100 ピクセルの正確な位置です。
繰り返し/繰り返しなし/繰り返し x /繰り返し y はそれぞれ、レイヤー全体を塗りつぶす/塗りつぶさない/塗りつぶしを意味します。 X 軸/Y 軸に沿った塗りつぶし。

height / width / color
はそれぞれ高さ（px）、幅（px）、フォントの色（HTML カラーシステムテーブル）を表します。

4. ページを中央に配置するにはどうすればよいですか?

コードを保存すると、ページ全体が中央に表示されることがわかります。では、ページが中央に表示されるのはなぜでしょうか。

は #container で次の属性を使用したためです:
margin:0 auto;
前の手順によると、上下のマージンは 0、左右のマージンは自動であることがわかります。自動的に中央に配置されます。
ページを左側に表示したい場合は、デフォルトで左側に表示されるため、自動値をキャンセルしてください。
margin:auto を使用すると、レイヤーを自動的に中央に簡単に配置できます。

5. ここでは一般的に使用される CSS プロパティのみを紹介します。その他については、CSS2.0 の中国語マニュアルを参照してください。