divとcssレイアウトを組み合わせたbbsホームページ（div cssレイアウトエントリー）_体験交流

フォーラムのホームページをヘッダー領域、情報領域、コンテンツ領域、フッター領域に分割しました。まず、これらを含めるには大きな div を使用します。主な理由は、ページ全体の調整を容易にするためです。たとえば、ワイド画面または狭い画面に合わせたい場合は、この大きな div を設定するだけで済みます。
友人がデバッグに使用できるように、最初にコードを投稿してください。
css:

コードをコピー コードは次のとおりです:

/* CSSドキュメント */
body{
background-color:#F5F5F5;
margin:0;
padding:0;
font-family : "Lucida Grande"、Verdana、Lucida、Arial、 Helvetica, , サンセリフ;
font-size:12px;
}
.pagehoder{
width:100%;
margin:auto;
background-color:#2662DF ;
border-left:2px ソリッド #7197D7;
border-rigth:2px ソリッド #7197D7;
border-bottom:2px ソリッド #7197D7;
}
.header{
ボーダートップ :2px ソリッド #7197D7;
高さ:60px;
背景色: #B1C3D9;
}

.logo{
background:url(../images /logo.png) 繰り返しなし ;
幅:200px;
高さ:60px;
float:left;
}
.img{
background:url(../画像/画像1 .jpg)repeat-x ;
高さ:60px;
}
.navigate {
padding-left:20px;
background-color:#F3F8FE;
高さ:10px;
}
.navigate li{
float:left;
}
.navigate li a{
margin-left:2px;
padding-top:3px ;
padding-bottom:3px;
text-align:center;
display:block;
text-decoration:none;
width:70px;
height:10px; background -color:#ececec;
}
.navigate li a:hover{
color:#ffffff;
background-color:#bbbbbb;
}
.notice {
background-color:#ffffff;
height:20px;
}
.content{
background-color:#0000FF;
height:400px;
} .contentHead{
text-align:center;
padding-top:5px;
padding-bottom:0px;
height:20px;
background-color:#71A3CC; }
.f1{
width:60%;
float:left;
background-color:#71A3CC;
}
.f2{
width:12 %; float:left;
background-color:#71A3CC;
}
.f3{
width:12%;
float:left;
background-color :#71A3CC ;
}
.f4{
幅:15%;
背景色:#71A3CC;
}

.typeHolder{
幅: 100%;
背景色:#D9DBE4;
}
.type{
width:60%;
float:left;
}
.boardHolder{
text- align:center;
width:100%;
background-color:#FFFFFF;
}
.boardName{
width:60%;
float:left;
}
.subject{
width:12%;
float:left;
background-color:#F7F7F8;
}
.article{
width: 12%;
float:left;
background-color:#F7F7F8;
}
.last{
width:15%;
background-color:#F7F7F8;
} .msg{
背景色:#FAFAFA;
高さ:60px;
}
.footer{
背景色:#99CC33;
高さ: 20px; text-align:center;
}

.
html:

コードをコピー コードは次のとおりです。