今天看到一个Div+CSS 布局的经典教程，奉献给大家，本人一向偏好DIV+CSS，
无标题文档 Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
这是XHTML 的基本结构，将其命名为index.htm，另一个记事本文档则命名为
css.css。
下面，我们在标签对中写入DIV 的基本结构，代码如下：
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
今後コードを読みやすくするために、関連するコメントを追加する必要があります。次に、css.css ファイルを開いて CSS 情報を記述します。コードは次のとおりです:
/*基本情報*/
。 body {font:12px Tahoma;margin :0px;text-align:center;background:#FFF;}
/*ページレイヤーコンテナ*/
#container {width:100%}
/*ページヘッダー*/
#Header {幅:800px;マージン:0 自動;高さ:100px;背景:#FFCC99}
/*ページ本文*/
#PageBody {幅:800px;マージン:0 自動;高さ:400px;背景:#CCFF00}
/ *ページ下部*/
# Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
上記のファイルを保存し、ブラウザで開くと、この時点ですでに基本的な構造が確認できています。これがページのフレームです。
上記の CSS に関する手順 (詳細については、オンラインでダウンロードできる CSS2.0 中国語マニュアルを参照してください):
1. コメントを書く習慣を身につけてください。これは非常に重要です。
Foxit PDF Creator によって生成されました。 © Foxit Software
http: //www.foxitsoftware.com 評価専用です。
2. ページ上のすべてのコンテンツはこのタグ ペア内に記述する必要があります。これ以上は説明しません。 CSS コードの意味:
font:12px Tahoma;
ここでは略語が使用されています。完全なコードは次のようになります: font-size:12px;font-family:Tahoma;
フォント サイズが 12 ピクセルであり、フォントがTahoma 形式;
margin :0px;
の完全なバージョンは次のようになります。 0px 0px
順序は上/右/下/左で、margin:0 (省略形); と書くこともできます
上記のスタイルの説明は、ボディ部分の上下左右の余白が 0 ピクセルであることを意味します。 auto を使用すると、マージンが自動的に調整されます
さらに次のような書き方もあります:
margin:0px auto;
上下のマージンが 0px で、左右のマージンが自動的に調整されることを示します。今後使用するpadding属性はmarginと多くの類似点があり、それらのパラメータは同じ
、
ですが意味が異なります。marginは外側の距離、paddingは内側の距離です。
text-align:center
テキストの配置を左、右、中央に設定できます。ここでは中央配置に設定します。
background:#FFF
背景色を白に設定します。ここでは、完全な色は、background:#FFFFFF として使用されます。
background は、指定したレイヤーを背景色と背景画像で埋めるために使用できます。将来的には、次の
形式を使用します。
background:#ccc url('bg.gif') 左上 no-repeat; を意味します。 #CCC (グレースケール カラー) を使用します。レイヤー全体を塗りつぶし、背景画像として bg.gif を使用します。
左上
は、画像が現在のレイヤーの左上端に位置することを意味します。no-repeat は、画像サイズのみを表示することを意味します。
レイヤー全体を塗りつぶします。
top/right/left/bottom/center
は、背景画像を配置するために使用されます。つまり、それぞれ、top/right/bottom/left/center を使用することもできます。
background:url('bg.gif') 20px 100px;
X シートは 20 ピクセルでマークされ、Y 座標は 100 ピクセルの正確な位置を意味します。
Foxit PDF Creator © Foxit Software によって生成
http://www.foxitsoftware.com 評価専用です。
repeat/no-repeat/repeat-x /repeat -y
はそれぞれ、レイヤー全体を塗りつぶす/塗りつぶさない/X 軸に沿って塗りつぶす/Y 軸に沿って塗りつぶすことを意味します。
height / width / color
はそれぞれ高さ（px）、幅（px）、フォントの色（HTMLカラーシステムテーブル）を表します。
4. ページを中央に配置するには?
コードを保存すると、ページ全体が中央に表示されることがわかります。
ページが中央に表示されるのはなぜでしょうか?
これは、 #container で次の属性を使用したためです:
margin:0 auto;
前の手順によると、上下のマージンは 0、左右のマージンは自動であることがわかります。そのため、レイヤーは
自動的に中央に配置されます。
ページを左側に表示したい場合は、デフォルトで左側に表示されるため、自動値をキャンセルしてください。
margin:auto を使用すると、レイヤーを自動的に中央に簡単に配置できます。
5. ここでは一般的に使用される CSS プロパティのみを紹介します。その他については、CSS2.0 の中国語マニュアルを参照してください。
ページの大まかな DIV 構造を記述したら、各部分を詳細に作成し始めることができます。
前の章では、いくつかのスタイルを作成しました。これらのスタイルは、
css.css 内のすべてのスタイルをクリアし、次のスタイル コードを書き直しました:
スタイルの説明:
a :link,a :visited {font-size:12px;text-decoration:none;}
a:hover {}
これら 2 つの項目はページ内のハイパーリンクのスタイルを制御します。詳細については説明しません。マニュアルを参照してください。 。
#container {width:800px;margin:10px auto}
ページ全体の表示領域を指定します。
width:800px は幅を 800 ピクセルに指定し、実際のニーズに応じてここで設定します。
margin:10px auto、ページの上下の余白は 10 ピクセルで、ページは中央揃えになります。
前の章で説明したように、レイヤーのマージン属性の左右のマージンを自動に設定すると、レイヤーを中央に配置できます
。
次に、TOP部分の作成を開始します。まず、TOP部分にはロゴ、メニュー、バナーが含まれます。我们要做的就是对设计好的图片进行切片，以下是在FW 下完成的切片：
为什么要这么写呢，因为对菜单使用列表
形式，可以在以后方便对菜单定 插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图
中的竖线分隔。
然后我们在css.css 中再写入以下样式：
/*页面头部*/
#header {background:url(logo.gif) no-repeat}
样式说明：
#header {background:url(logo.gif) no-repeat}
给页面头部分加入一个背景图片LOGO，并且不作填充。
这里，我们没有指定header 层的高度，为什么不指定呢？
因为header 层中还有菜单和banner 项，所以层的高度暂时是未知的，而层的
属性又可以让层根据内容自动设定调整，因此我们并不需要指定高度。
使用列表
制作菜单 来制作菜单。 这两个HTML 元素大家自己
去参考相关的内容吧，它们最主要的作用就是在HTML 中以列表的形式来显示一
些信息。
还有一点需要大家一定要分清楚的，当在HTML 中定义为id="divID"时，在CSS
对应的设置语法则是#divID{}，如果在HTML 中定义为class="divID"时，则在
CSS 中对应的设置语法是.divID。
如果id="divID"这个层中包括了一个
，则这个img 在CSS 中对应
的设置语法应该是#divID img {}，同样，如果是包含在class="divID"这个层
中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了。
另外，HTML 中的一切元素都是可以定义的，例如table、tr、td、th、form、
img、input...等等，如果你要在CSS 中设置它们，则直接写入元素的名称加上
一对大括号{}就可以了。所有的CSS 代码都应该写在大括号{}中。
按照上面的介绍，我们先在css.css 中写入以下代码：
#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}
解释一下：
#menu ul {list-style:none;margin:0px;}
list-style:none，这一句是取消列表前点，因为我们不需要这些点。
margin:0px，这一句是删除UL 的缩进，这样做可以使所有的列表内容都不缩进。
Generated by Foxit PDF Creator © Foxit Software
http://www.foxitsoftware.com For evaluation only.
#menu ul li {float:left;}
这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性
(float)。
到这一步，建议大家先保存预览一下效果，我们再添加下面的内容，效果如下：
这时，列表内容是排列在一行，我们在#menu ul li {}再加入代码margin:0 10px
#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}
margin:0 10px 的作用就是让列表内容之间产生一个20 像素的距离(左：10px，
右：10px)，预览的效果如下：
，要想加入
竖线就使用它了。
按照上面说的方法，我们再添加以下代码：
.menuDiv {width:1px;height:28px;background:#999}
保存预览一下，竖线是否已经出来了？关于这段代码就不多讲了，应该是很容
易理解的。
中加入这么一段就可以了，你可以试试：
大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，
利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。
上記のコードは、デザイン スケッチ内のバナーを実現し、次のスタイルを css.css に追加します。
#banner {
background:url(banner.jpg) 0 30px no-repeat; /*背景画像を追加*/
width :730px; /*レイヤーの幅を設定します*/
margin:auto; /*レイヤーを中央に配置します*/
height:240px; /*border-bottom:5px Solid #EFEFEF; *浅い線を描画します 灰色の実線*/
clear:both /*Clear floats*/
}
境界線を通る実線を描くのは簡単で、画像のダウンロードに占有されるネットワークリソースを削減します
Foxit PDF Creatorによって生成© Foxit Software
http://www.foxitsoftware.com 評価専用です。
ソース。ページの読み込みが速くなります。
もう 1 つ説明するのは、clear:both です。これは、左右のすべてのフロートをクリアすることを意味します。次のレイアウトでも、この属性を使用します。clear:left/right。 Clear:both を追加したのは、
の前の ul 要素と li 要素が float に設定されているためです。クリアしないと、バナー レイヤーの位置の設定に影響します。
上記はページのメイン部分であり、CSSで次の内容を追加します.css スタイル:
#pagebody {
width:730px; /*幅を設定*/
margin:8px auto; /*中央揃え*/
}
#sidebar {
width:160px; /*幅を設定*/
text- align:left; /*テキストを左に揃えます*/
float:left; /*左にフロートさせません*/
overflow:hidden;幅を超える部分を非表示にする*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*右へのフロート*/
clear:right; /*フロートは使用できません右側*/
overflow:hidden
}
効果を確認するには、#sidebar と #mainbody に次のコードを追加することをお勧めします。プレビューが完了したら、このコードは削除できます:
border:1px実線 #E00;
高さ:200px
プレビュー効果を保存すると、これら 2 つのレイヤーが完全に浮いていて、レイアウト要件を満たしていることがわかります。2 つのレイヤーの実際の幅は 160+2(境界線)+570+2=734px である必要があります。親レイヤーの幅を超えています。
クリアのため、これら 2 つのレイヤーがずれることはなく、
Foxit PDF Creator © Foxit Software によって生成されました
http://www.foxitsoftware.com
コンテンツが長すぎるため（写真など）、ページがずれることはありません。
後で追加された overflow:hidden は、長すぎるコンテンツの部分 (写真など) を自動的に非表示にすることができます。通常、一部の Web ページが読み込まれると、画像が大きすぎるためにレイアウトが引き伸ばされ、ページがダウンロードされるまでレイアウトが通常に戻らないことがわかります。この問題は、overflow:hidden を追加することで解決できます。
CSS のすべての属性は、適切に使用すれば、多くの問題を解決できます。おそらく、レイアウトしているページとは関係ありません
が、問題が発生した場合は、これらの属性の役割を理解しておく必要があります。 これらのプロパティを使用してみてください。この問題を解決するために。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
