Div CSS レイアウト入門tutorial_html/css_WEB-ITnose

Div CSS レイアウト入門チュートリアル

Web ページ制作では、CSS、HTML、DHTML、XHTML などの用語がたくさんあります。次の記事では、HTML についての基本的な知識を使用します。この入門チュートリアルを学習する前に、HTML についての基本的な知識がすでにあることを確認してください。 DIV+CSS を段階的に使用して Web ページのレイアウトをデザインしてみましょう。

すべてのデザインの最初のステップは構想することです。構想した後は、一般的に、PhotoShop や FireWorks などの写真処理ソフトウェア (以下、PS または FW と呼びます) を使用して、作成するインターフェイスのレイアウトを単純に描画する必要があります。以下は私がよく考えたインターフェイスのレイアウト図です。

次に、概念図に基づいてページのレイアウトを計画する必要があります。画像を注意深く分析した後、画像が次の部分に大まかに分かれていることが簡単にわかります。

1. 上部、ロゴ、メニュー、バナー画像も含まれます。
2. コンテンツ部分はサイドバーとメインコンテンツに分割できます
3. 下部には著作権情報が含まれます。
上記の分析により、デザインレイヤーは以下のように簡単にレイアウトできます。

上の図に基づいて、レイヤーの入れ子関係を示すために実際のページ レイアウト図を作成しました。理解しやすくなります。

DIV の構造は以下の通りです:
│body {} /*HTML要素です、詳細は説明しません*/
└#Container {} /*ページレイヤーコンテナ*/
§#Header {} /* ページヘッダー*/
§#PageBody {} /*ページボディ*/
│ §#Sidebar {} /*Sidebar*/
│ └#MainBody {} /*メインコンテンツ*/
└#Footer { } /*ページの下部*/

この時点で、ページのレイアウトと計画は完了しました。次に行う必要があるのは、HTML コードと CSS の記述です。

業界トレンド

技術文書

アートデザイン

写真ビデオ撮影

コンピュータテクノロジー

リソースのダウンロード

個人コラム

CG絵

トピック

クラシックフォーラム

Web ページ制作 | マルチメディア ネットワーク プログラミング | Web サイト構築

あなたの位置:ホームページ> ウェブサイト構築> Div+CSS レイアウト入門チュートリアル

中国語の特徴を持つ「曲線ドメイン名」 " リストに戻る 条件付きアノテーションの理論と実践

Div+ CSS レイアウト入門チュートリアル 作成者: aultoale 作成日時: 2006-06-10 文書タイプ: オリジナル 出典: Blue Ideal

Page 1 ページのレイアウトと計画
Page 2 ライティング 全体的なレイヤー構造と CSS

Page 3トップ作成パート 1

ページ 4 トップ作成パート 2
ページ 5 作成 - 境界線とクリアを使用する

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

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

下面，我们在

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

[color=#aaaaaa][/color]
　　

[color=#aaaaaa][/color]
　　

　　

[color=#aaaaaa][/color]
　　　　

[color=#aaaaaa][/color]
　　　　

　　　　

[color=#aaaaaa][/color]
　　　　

　　

　　

[color=#aaaaaa][/color]
　　

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

/*Basic information*/
body {font:12px Tahoma ;margin:0px;text-align:center;background:#FFF;}

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

/*Page header*/
#Header {幅: 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.ページ上のすべてのコンテンツはこのタグ ペア内に記述する必要があります。これ以上は説明しません。

font:12px Tahoma;

ここでは略語が使用されています。 complete コードは次のようになります: 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 ピクセルであることを示します

というものもあります。次の書き込みメソッド:

margin:0px auto;

上下のマージンが 0px であることを示し、左右は自動的に調整されます。
今後使用するパディング属性は、margin と多くの類似点があります。同じですが、意味が異なります。マージンは外部距離であり、パディングは内部距離です。

text-align:center
テキストの配置は左、右、中央に設定できます。ここでは中央揃えに設定します。

background:#FFF
背景色を白に設定します。ここでの色には省略形が使用されます。完全な色は、background:#FFFFFF である必要があります。

background は、指定したレイヤーを背景色と背景画像で埋めるために使用できます。将来的には次の形式を使用します。

background:#ccc url('bg.gif') 左上 no-repeat; を意味します。 #CCC (グレースケール カラー) はレイヤー全体を塗りつぶし、背景画像として bg.gif を使用します。
左上

は画像が現在のレイヤーの左上端に配置されることを意味し、no-repeat は画像のみを意味します。レイヤー全体を塗りつぶさずにサイズが表示されます。

top/right/bottom/left/center
は、背景画像を配置するために使用されます。つまり、それぞれ、top/right/bottom/left/center を使用することもできます。
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、左右のマージンは自動であることがわかります。そのため、レイヤーは自動的に中央に配置されます。
ページを左側に表示したい場合は、デフォルトで左側に表示されるため、自動値をキャンセルしてください。

margin:auto を使用すると、レイヤーを自動的に中央に簡単に配置できます。

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