Rumah > hujung hadapan web > tutorial css > div digabungkan dengan css layout bbs homepage (div+css layout entry)_Experience exchange

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

WBOY
Lepaskan: 2016-05-16 12:04:12
asal
2250 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论坛

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>










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.
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan