css 레이아웃과 결합된 div bbs 홈페이지(div+css 레이아웃 항목)_체험교류

J'ai divisé la page d'accueil du forum en zone d'en-tête, zone d'informations, zone de contenu et zone de pied de page. Tout d'abord, utilisez un grand div pour les inclure, principalement parce qu'il est pratique d'ajuster la page globale. Par exemple, si vous souhaitez l'ajuster à un écran large ou à un écran étroit, il vous suffit de définir ce grand div.
Publiez d'abord le code pour que vos amis puissent le déboguer.
css :

Copier le code Le code est le suivant :

/* Document CSS */
body{
background-color:#F5F5F5;
margin:0;
padding:0
font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica; , ,sans -serif;
font-size:12px;
.pagehoder{
width:100%
margin:auto
background-color:#2662DF;

border-rigth:2px solid #7197D7;
border-bottom:2px solid #7197D7
border-top: 2px solid #7197D7
hauteur:60px
arrière-plan ; -color : #B1C3D9 ;
}

.logo{
background:url(../images/logo.png )
width:200px
hauteur ; :60px;
float:left;
}
.img{
background:url(../images/images1. jpg)
hauteur:60px; }
.navigate {
padding-left:20px;
background-color:#F3F8FE;
hauteur:10px;
.navigate li{
float:left; ;
}
.navigate li a{
margin-left:2px;
padding-top:3px
padding-bottom:3px; 🎜>display:block;
text-decoration:none;
width:70px;
hauteur:10px;
background- color:#ececec
}
. :hover{
color:#ffffff;
background-color:#bbbbbb;
}
.notice{
background-color:#ffffff;
hauteur:20px; >}
.content{
background-color:#0000FF;
hauteur:400px;
.contentHead {
text-align:center
padding-top; :5px;
padding-bottom:0px;
hauteur:20px;
couleur d'arrière-plan:#71A3CC
.f1{
largeur:60%; float:left;
couleur de fond:#71A3CC;
.f2{
largeur:12%;
float:gauche
couleur de fond:#71A3CC; 🎜>}
.f3{
largeur:12%;
float:gauche
couleur de fond:#71A3CC
.f4{
largeur:15; %;
couleur de fond :#71A3CC;
}

.typeHolder{
largeur : 100 % ;
couleur de fond :#D9DBE4; .type{
width:60%;
float:left;
}
.boardHolder{
text-align :center
width:100%; couleur:#FFFFFF;
}
.boardName{
largeur:60%
float:left
}
.subject{
largeur:12%; >float:gauche;
couleur de fond:#F7F7F8;
}
.article{
largeur:12%;
couleur de fond:#F7F7F8;
}
.last{
width:15%;
background-color:#F7F7F8;
.msg{
background-color:#FAFAFA; >hauteur:60px;
}
.footer{
couleur de fond:#99CC33;
hauteur:20px
text-align:center
}
.
html :




Copier le code


code Comme suit :