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 :

首页

搜索

会员列表

热门主题

最新主题

欢迎光临sclBBS。

版面

主题

文章

最后发表

开源项目

JForum论坛

23

23

23

开源项目1

JForum论坛1

23

23

23

开源项目2

JForum论坛2

23

23

23

开源项目3

JForum论坛3

23

23

23

看谁在线上

目前总共发表了 2,806 篇文章
目前总共有 4,186 位注册会员
最新注册的会员: cut
目前总共有 80 位用户在线 :: 1 位会员, 79 位访客 [ 系统管理员 ] [ 版主 ]
最高在线人数 2,712 人 [ 记录时间 :: 2007-08-13 16:12:34 ]线注册会员 : Administrateur

< ;/div>

Propulsé par sclBBS auteur : sclsch@188.com

사진은 업로드할 수 없습니다. 학습에는 영향이 없습니다.
이것은 제가 디자인한 첫 번째 레이아웃입니다. div는 기본적으로 블록 모양이고 전체 행을 차지합니다. 두 개 이상의 열로 디자인하려면 float 속성을 사용하면 됩니다. 왼쪽( float:left), 이때 아래 div의 크기를 줄일 수 있으면 위쪽 행으로 부동되어 2열 레이아웃,
여러 열 등을 형성합니다. 기본 사항을 이해하고 나면 나중에 자세히 알아볼 수 있습니다. 저처럼 미술을 처음 접하는 친구들에게 조금이나마 도움이 되었으면 좋겠습니다. 개발자들이 미술을 이해하는 것도 중요합니다. 많은 예술에 압도될 필요는 없습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.