ホームページ  >  記事  >  ウェブフロントエンド  >  Div+CSSレイアウト入門チュートリアル(2.全体のレイヤー構成とCSSを書く)_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 12:29:56921ブラウズ

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 の中国語マニュアルを参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。