ホームページ > 記事 > ウェブフロントエンド > Div+CSSレイアウト入門チュートリアル(2.全体のレイヤー構成とCSSを書く)_html/css_WEB-ITnose
Div+CSS布局入门教程 (2.写入整体层结构与CSS)
接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:
下面,我们在
标签对中写入DIV的基本结构,代码如下:
/*基本情報*/
body {font:12px Tahoma;
margin:0px;text-align:center;
background:#FFF;}
/*ページレイヤーコンテナ*/
#container {
width:100%
}
/ * ページヘッダー*/
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
上記のファイルを保存し、ブラウザで開くと、この時点でページの基本構造が表示されています。
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 で、左右のマージンは自動的に調整されます 今後使用するパディング属性には多くの類似点があります。マージンは同じですが、意味が異なります。マージンは外部距離であり、パディングは内部距離です。
テキストの配置は左、右、中央に設定できます。ここでは中央配置に設定します。
ここでは背景色を白に設定します。完全な色は、background:#FFFFFF になります。
背景は、指定したレイヤーを背景色と背景画像で埋めるために使用できます。将来的には次の形式を使用します。
背景:#ccc url('bg.gif') 左上 no-repeat; を意味します。 #CCC(グレースケールカラー) はレイヤー全体を塗りつぶします。bg.gif を背景画像として使用します。
は画像が現在のレイヤーの左上端に配置されることを意味します。no-repeatは画像サイズのみを意味します。レイヤー全体を埋めずに表示されます。
top/right/left/bottom/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 の中国語マニュアルを参照してください。