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

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论坛

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 位注册会员 位注册会员 目前总共有 80 位用户在线 :: 1 位会员, 79 位访客 [ 系统管理员 ] [ 版主 ]
最高在线人数 2,712 人 [ 记录时间 :: 2007-08-13: 36:16:00]注册会员: Pentadbir

< ;/div>

Dikuasakan oleh pengarang sclBBS:sclsch@188.com

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn