div combiné avec la page d'accueil de la mise en page CSS (entrée de mise en page div + CSS)

div combiné avec la page d'accueil de la mise en page CSS (entrée de mise en page div + CSS)_Échange d'expérience

WBOY

Libérer： 2016-05-16 12:04:12

original

2268 Les gens l'ont consulté

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 :

<머리>

sclBBS首页

<본문>

欢迎光临sclBBS。

특수면

主题

文章

最后发表

开源项目

JForum论坛

开源项目1

JForum论坛1

开源项目2

JForum论坛2

开源项目3

JForum论坛3

看谁在线上

最高在线人数 2,712 人 [ 记录时间 :: 2007-08-13 16:12:34 ]
目前在线注册会员: 관리자

< ;/div>

Bilder können nicht hochgeladen werden. Es gibt keine andere Möglichkeit. Es hat keinen Einfluss auf das Lernen.
Dies ist das erste Layout, das ich entworfen habe. Ich habe daraus gelernt, dass Divs standardmäßig die gesamte Zeile einnehmen. Wenn Sie in zwei oder mehr Spalten entwerfen möchten, können Sie das Float-Attribut verwenden, das verschoben werden kann nach links ( float:left). Wenn zu diesem Zeitpunkt die Größe des Div darunter verringert werden kann, wird es in die obere Zeile verschoben und bildet so ein zweispaltiges Layout,
mehrere Spalten usw. Sobald Sie die Grundlagen verstanden haben, können Sie später mehr im Detail erfahren. Ich hoffe, dass ich Freunden, die neu in der Kunst sind, wie mir, etwas helfen kann. Es ist auch wichtig, dass Entwickler Kunst verstehen. Es besteht kein Grund, sich von vielen Künsten überfordern zu lassen.