[転送] Div+CSSレイアウト入門tutorial_html/css_WEB-ITnose

出处：蓝色理想    责任编辑：moby

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。

下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：

　　1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
　　2、内容部分又可分为侧边栏、主体内容；
　　3、底部，包括一些版权信息。
　　有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。

　　DIV结构如下：
　　│body {}　/*这是一个HTML元素，具体我就不说明了*/
　　└#Container {}　/*页面层容器*/
　　　　　├#Header {}　/*页面头部*/
　　　　　├#PageBody {}　/*页面主体*/
　　　　　│　├#Sidebar {}　/*侧边栏*/
　　　　　│　└#MainBody {}　/*主体内容*/
　　　　　└#Footer {}　/*页面底部*/

至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。

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

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 无标题文档
< link href ="css.css" rel ="stylesheet" type ="text/css" />


< body >

这是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:#00FFFF}

上記のファイルを保存し、ブラウザで開くと、これがページの基本構造を確認できます。

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

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

2.ページ上のすべてのコンテンツはこのタグ ペア内に記述する必要があります。これ以上は説明しません。

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

margin:0px 0px 0px 0px

上記のスタイルは、ボディ部分の上下左右の余白が0ピクセルであることを示します

以下のようなものもあります。書き込みメソッド:

上下のマージンが 0px であることを示し、左右は自動的に調整されます
将来使用するパディング属性はマージンと多くの類似点があります。 ,

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

background:#FFF

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 軸に沿った軸/塗りつぶし。

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

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

これは、 #container で次の属性を使用したためです:
margin:0 auto;

ページを左側に表示したい場合は、デフォルトで左側に表示されるため、自動値をキャンセルしてください。

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



ページの大まかな DIV 構造を記述したら、各部分の詳細な作成を開始できます。

前の章では、いくつかのスタイルを作成しました。これらのスタイルは、css.css 内のすべてのスタイルをクリアし、次のスタイル コードを再作成しました:

/* 基本情報*/

a: リンク、a: 訪問済み { フォントサイズ: 12px; } :hover {}

/* ページレイヤーコンテナ*/

ページ全体の表示領域を指定します。
width:800px は幅を 800 ピクセルに指定し、実際のニーズに応じてここで設定します。
margin:10px auto、ページの上下の余白は 10 ピクセルで、ページは中央揃えになります。
前の章で説明したように、レイヤーのマージン属性の左右のマージンを自動に設定すると、レイヤーを中央に配置できます。

次に、TOP 部分の作成を開始します。TOP 部分には、ロゴ、メニュー、バナーが含まれています。以下は、FW で完成したスライスです。 TOP 部分は 2 つの部分に分かれており、最初の部分にはロゴと水平線が含まれます。ロゴ画像にはあまり多くの色がないため、この部分を GIF 形式で保存しました。パレットの選択は正確で、アルファ透明度が選択され、カラー バージョンは白 (ここの色は背景色と同じである必要があります) でした。ロゴ .gif としてエクスポートされ、画像の幅は 800 ピクセルです。

この時点で、何人かの友人が、 * なぜ GIF 形式を使用するのですか? JPEGを使ったほうがいいんじゃないでしょうか？

答えはノーです。バナー部分は詳細な画像なので、GIF形式を使用すると色が失われすぎるため、JPEG形式を使用してファイルをbanner.jpgとしてエクスポートする必要があります。

スライスを切り取った後、TOP 部分を分析し、ヘッダーに DIV 構造を書き込む必要があります。 コードは次のとおりです。メニューのフォームは後で簡単にカスタマイズできます。

そして、なぜ次のコードを追加する必要があるのでしょうか?

このコードを挿入すると、プレビューでの縦線の分離など、メニュー オプション間にいくつかの分離スタイルを簡単に挿入できます。

次に、css.css に次のスタイルを記述します:

/* Page header*/
#header { background : url(logo.gif) no-repeat }

#header {background:url(logo.gif) no-repeat}
背景画像のロゴをページヘッダーに埋めずに追加します。

ここでは、ヘッダー層の高さを指定しませんでしたが、なぜそれを指定しないのでしょうか?

ヘッダーレイヤーにはメニュー項目とバナー項目があるため、レイヤーの高さは一時的に不明ですが、レイヤーのプロパティによりコンテンツに基づいてレイヤーが自動的に調整されるため、高さを指定する必要はありません。

list

    <div id="banner"></div>

     #banner { background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/ width:730px; /*设定层的宽度*/ margin:auto; /*层居中*/ height:240px; /*设定高度*/ border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/ clear:both /*清除浮动*/}

    <div id="pagebody"><!--页面主体--> <div id="sidebar"><!--侧边栏--> </div> <div id="mainbody"><!--主体内容--> </div></div>

     #pagebody { width:730px; /*设定宽度*/ margin:8px auto; /*居中*/}#sidebar { width:160px; /*设定宽度*/ text-align:left; /*文字左对齐*/ float:left; /*浮动居左*/ clear:left; /*不允许左侧存在浮动*/ overflow:hidden; /*超出宽度部分隐藏*/}#mainbody { width:570px; text-align:left; float:right; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden}

     border:1px solid #E00;height:200px