Div with CSS Layout bbs homepage (div+css layout) _ Experience Exchange

I divided the Forum homepage into header area, information area, content area, footer area. First with a large div to include these, mainly considering the overall adjustment of the page, for example, to adjust to a widescreen or narrow screen, as long as the setting of this large div can be.
First put the code out, for friends debugging use.
Css:
Copy CodeThe 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 CodeThe code is as follows:






<title>Sclbbs Home</title>

Home

Search

Member List

Hot Topics

Latest Topics

Welcome to Sclbbs.




Layout
Theme
Article
Last Post


Open Source Projects



Jforum Forum
23
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



Jforum Forum 3
23
23
23







Look who's on the line.




A total of 2,806 articles are currently published
At present, a total of 4,186 registered members
Newly Registered members: Mxjccut
There are 80 users online:: 1 Members, 79 Guests [system Administrator] [Moderator]
Maximum number of people online 2,712 [record time:: 2007-08-13-16:12:34]
Current Online membership: Admin






Powered by Sclbbs author:sclsch@188.com






Pictures can not be uploaded, no way, do not affect learning.
This is the first layout I designed, to understand that the DIV is blocky, the default is the entire row, if you want to design into two or more columns, you can use the Float property, it can float to the left (Float:left), then, if the following div size can be dropped, it will float to the top row, This creates a two-column layout,
Multiple columns and so on. Understand the basic, you can learn in the direction of the fine. Hope to like me as a beginner of the art of the friend Point of Help, do the development of understanding art is also very important, art more not pressure.

