Div+CSSレイアウト入門チュートリアル(2)_html/css_WEB-ITnose

作者:番茄红了
二、写入整体层结构与CSS

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

程序代码

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

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

程序代码

　　

　　

　　

　　　　

　　　　

　　　　

　　　　

　　

　　

　　

今後コードを読みやすくするために、css.css ファイルを開いて CSS 情報を記述します。

プログラム。 code

/*基本情報*/
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:#00FFFF}

上記のファイルを保存してブラウザで開くと、この時点ですでにページの基本構造が見えています。
上記の CSS に関する説明 (詳細については、オンラインでダウンロードできる CSS2.0 の中国語マニュアルを参照してください):

1. 良いコメントの習慣を身につけてください。これは非常に重要です

2. 本文は HTML 要素です。 、およびページ内のすべてのコンテンツは、このタグ ペア内に記述する必要があります。これ以上は言いません。

3. よく使用される CSS コードの意味を説明します。

font:12px Tahoma
ここでは略語が使用されています。完全なコードは次のようになります: font-size:12px; font-family:Tahoma; フォント サイズが 12 ピクセルで、フォントが Tahoma 形式であることを示します。 margin: 0px;

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 となります。
background は、指定したレイヤーを背景色と背景画像で塗りつぶすために使用できます。将来的には次の形式を使用します。
background:#ccc url('bg.gif') top left no-repeat; を示します。 #CCC(グレースケールカラー)はレイヤー全体を塗りつぶし、背景画像としてbg.gifを使用します
左上
画像が現在のレイヤーの左上端に位置することを示します。 No-repeatは画像サイズのみを示します。レイヤー全体を埋めずに表示されます。
上/右/左/下/中央
背景画像の配置に使用され、それぞれ上/右/下/左/中央を示します
background:url('bg.gif') 20px 100px; を示すこともできます。 X シート マークは 20 ピクセル、Y 座標は 100 ピクセルの正確な位置決めです
Repeat/no-repeat/repeat-x/repeat-y
それぞれ、レイヤー全体を塗りつぶす/塗りつぶさない/X に沿って塗りつぶすことを意味します。 Y 軸に沿った軸/塗りつぶし。

高さ/幅/色
それぞれ高さ(px)、幅(px)、フォントの色(HTMLカラーシステムテーブル)を表します。

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

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

関連記事:
Div+CSS レイアウト入門チュートリアル (1) # -- ページのレイアウトと計画
Div+CSS レイアウト入門チュートリアル (2) # -- 全体のレイヤー構造と CSS の書き方
Div+CSS レイアウト入門チュートリアル ( 3) # -- ページの先頭を作る (1)
Div+CSS レイアウト入門講座 (4) # -- ページの先頭を作る (2)----list

を使ってメニューを作る
Div+CSS レイアウト入門チュートリアル ( 5) # -- ボーダーとクリアを上手に活用しよう
CSS コードを最適化する #

Tomato のブログ