div digabungkan dengan css layout bbs homepage (div+css layout entry)

div digabungkan dengan css layout bbs homepage (div+css layout entry)_Experience exchange

WBOY

Lepaskan： 2016-05-16 12:04:12

asal

2268 orang telah melayarinya

Saya membahagikan halaman utama forum kepada kawasan pengepala, kawasan maklumat, kawasan kandungan dan kawasan pengaki. Pertama, gunakan div besar untuk menyertakan ini, terutamanya kerana ia adalah mudah untuk melaraskan halaman keseluruhan Contohnya, jika anda ingin melaraskannya ke skrin lebar atau skrin sempit, anda hanya perlu menetapkan div besar ini.
Siarkan kod dahulu untuk rakan-rakan menyahpepijat.
css:

Salin kod Kod adalah seperti berikut:

/* Dokumen CSS */
badan{
warna latar:#F5F5F5;
margin:0; , ,sans -serif;
fon-size:12px;
}
.pagehoder{
lebar:100%;

tepi sempadan: 2px pepejal #7197D7;
bawah sempadan: 2px pepejal #7197D7; -warna: #B1C3D9;
}

.logo{
latar belakang:url(../images/logo.png ) tiada ulangan
lebar: 200px; :60px;
float:left;
}
.img{
background:url(../images/images1. jpg) repeat-x ; }
.navigasi {
padding-left:20px;
background-color:#F3F8FE;
height:10px; ;
}
.navigasi ke{
margin-kiri:2px;
padding-top:3px; 🎜>paparan:blok;
teks-hiasan: tiada;
lebar: 70px;
tinggi: 10px; : hover{
warna:#ffffff;
warna latar:#bbbbbb;
}
.notis{
warna latar:#ffffff; >}
.kandungan{
warna latar:#0000FF;
tinggi:400px;
}
.contentHead {
text-align:center; :5px;
padding-bawah: 0px;
tinggi: 20px;
warna latar:#71A3CC; float:left;
warna latar:#71A3CC;
}
.f2{
lebar:12%; 🎜>}
.f3{
lebar:12%;
float:kiri;
warna latar:#71A3CC; %;
warna latar:#71A3CC;
}

.typeHolder{
lebar:100%; .type{
lebar:60%;
float:left;
}
.boardHolder{
text-align :center; warna:#FFFFFF;
}
.Nama papan{
lebar: 60%; >float:left;
warna latar:#F7F7F8;
}
.artikel{
lebar:12%;
}
.terakhir{
lebar:15%;
warna latar:#F7F7F8;
}
.msg{
warna latar:#FAFAFA; >tinggi:60px;
}
.footer{
warna latar:#99CC33;
tinggi: 20px; >.
html:

Salin kod

kod Seperti berikut:

sclBBS首页

欢迎光临sclBBS。

版面

主题

文章

最后发表

开源项目

JForum论坛

开源项目1

JForum论坛1

开源项目2

JForum论坛2

开源项目3

JForum论坛3

看谁在线上

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

< ;/div>

Gambar tidak boleh dimuat naik. Ia tidak menjejaskan pembelajaran.
Ini adalah reka letak pertama yang saya pelajari daripadanya bahawa div berbentuk blok dan menduduki keseluruhan baris secara lalai. Jika anda ingin mereka bentuk kepada dua atau lebih lajur, anda boleh menggunakan atribut apungan, yang boleh bergerak ke kiri ( float:left), pada masa ini, jika saiz div di bawah boleh digugurkan, ia akan terapung ke baris atas, sekali gus membentuk reka letak dua lajur,
berbilang lajur dan seterusnya. Sebaik sahaja anda memahami asasnya, anda boleh mengetahui lebih lanjut dengan lebih terperinci kemudian. Saya berharap dapat memberi sedikit bantuan kepada rakan-rakan yang baru berjinak-jinak dengan seni seperti saya. Ia juga penting untuk pemaju untuk memahami seni.