div combined with css layout bbs homepage (div css layout entry)_Experience exchange

I divided the forum homepage into header area, information area, content area, and footer area. First, use a large div to include these. The main reason is to facilitate the overall adjustment of the page. For example, if you want to adjust it to wide screen or narrow screen, you only need to set this large div.
Post the code first for friends to use for debugging.
css:

Copy code The code is as follows:

/* CSS Document */
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-left:2px solid #7197D7;
border-rigth:2px solid #7197D7;
border-bottom:2px solid #7197D7;
}
.header{
border-top :2px solid #7197D7;
height:60px;
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-top:3px;
padding-bottom:3px;
text-align:center;
display:block;
text-decoration:none;
width:70px;
height:10px;
background -color:#ececec;
}
.navigate li a:hover{
color:#ffffff;
background-color:#bbbbbb;
}
.notice{
background-color:#ffffff;
height:20px;
}
.content{
background-color:#0000FF;
height:400px;
}
. contentHead{
text-align:center;
padding-top:5px;
padding-bottom:0px;
height:20px;
background-color:#71A3CC;
}
.f1{
width:60%;
float:left;
background-color:#71A3CC;
}
.f2{
width:12%; float:left;
background-color:#71A3CC;
}
.f3{
width:12%;
float:left;
background-color:#71A3CC ;
}
.f4{
width:15%;
background-color:#71A3CC;
}

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

.
html:

Copy code The code is as follows:

Home

Search

Member List

Popular topics

Latest topics

div>

Welcome to sclBBS.

Layout div>

Topic

Article

Last post

Open Source Project

JForum Forum

23 div>

23

23

Open Source Project 1

JForum Forum 1

23

23

23

Open Source Project 2

JForum Forum 2

23

23

23

Open Source Project 3 div>

JForum Forum 3

23

23

23

See who is online

A total of 2,806 articles have been published so far
There are currently a total of 4,186 registered members
The latest registered member: mxjccut
There are currently a total of 80 Users online:: 1 member, 79 visitors [System Administrator] [Moderator]
The highest number of online users is 2,712 [Record Time:: 2007-08-13 16:12:34]
Currently online Registered member: Admin

Powered by sclBBS author:sclsch@188. com

Images cannot be uploaded, there is nothing I can do. Does not affect learning.
This is the first layout I designed. I learned from it that divs are block-shaped and occupy the entire row by default. If you want to design into two or more columns, you can use the float attribute, which can move to the left ( float:left), at this time, if the size of the div below can be dropped, it will float to the upper row, thus forming a two-column layout,
and so on for multiple columns. Once you understand the basics, you can learn more in detail later. I hope it can give some help to friends who are new to art like me. It is also important for developers to understand art. Having many skills is not a burden.