div kombiniert mit CSS-Layout BBS-Homepage (div + CSS-Layout-Eintrag)_Erfahrungsaustausch

Ich habe die Forum-Homepage in Kopfbereich, Informationsbereich, Inhaltsbereich und Fußbereich unterteilt. Verwenden Sie zunächst ein großes Div, um diese einzuschließen, vor allem, weil es praktisch ist, die gesamte Seite anzupassen. Wenn Sie sie beispielsweise auf einen breiten Bildschirm oder einen schmalen Bildschirm anpassen möchten, müssen Sie nur dieses große Div festlegen.
Veröffentlichen Sie zuerst den Code, damit Freunde ihn debuggen können.
css:

Code kopieren Der Code lautet wie folgt:

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

border-right:2px solid #7197D7;
border-top:2px solid #7197D7;
background -color: #B1C3D9;
}

.logo{
background:url(../images/logo.png ) no-repeat;
width:200px
height :60px;
float:left;
.img{
background:url(../images/images1. jpg) repeat-x ;
height:60px
}
.navigate {
padding-left:20px;
background-color:#F3F8FE;
height:10px;}
.navigate li{
float:left ;
}
.navigate li a{
margin-left:2px;
padding-bottom:3px; 🎜>display:block;
text-decoration:none;
height:10px;
background- color:#ececec;}
.navigate li a :hover{
color:#ffffff;
background-color:#bbbbbb;}
.notice{
background-color:#ffffff; }
.content{
background-color:#0000FF;
height:400px
}
.contentHead {
text-align:center; :5px;
padding-bottom:0px;
background-color:#71A3CC;
width:60%; float:left;
background-color:#71A3CC; 🎜>}
.f3{
width:12%;
background-color:#71A3CC;
.f4{
width:15 %;
Hintergrundfarbe:#71A3CC;}

.typeHolder{
width:100%;
Hintergrundfarbe:#D9DBE4; .type{
width:60%;
float:left;}
.boardHolder{
text-align :center;
background- color:#FFFFFF;
.boardName{
width:60%;
float:left;
.subject{
width:12%; >float:left;
background-color:#F7F7F8;
}
.last{
width:15%;
background-color:#F7F7F8;
}
.msg{
background-color:#FAFAFA; >height:60px;
.footer{
background-color:#99CC33;
text-align:center; >.
html:




Code kopieren


Code wie folgt:

<머리>





<본문>

首页

搜索

会员列表

热门主题

最新主题

欢迎光临sclBBS。

특수면

主题

文章

最后发表

开源项目

JForum论坛

23

23

23

开源项目1

JForum论坛1

23

23

23

开源项目2

JForum论坛2

23

23

23

开源项目3

JForum论坛3

23

23

23

看谁在线上

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

< ;/div>

제공: sclBBS 작성자: sclsch@188.com

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn