I divide the Forum homepage into header area, information area, content area, footer area. First of all with a large div to include these, mainly in view of the overall adjustment of the page is convenient, such as to adjust to widescreen or narrow screen, as long as the setting of this large div can be.
First put the code out, for friends to debug use.
Css:
Copy Code code 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 code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<link href= "Css/style.css" rel= "stylesheet" type= "Text/css"/>
<title>sclbbs Home </title>
<body>
<div class= "Pagehoder" >
<div class= "Header" >
<div class= "logo" >
</div>
<div class= "img" ></div>
</div>
<div class= "Navigate" >
<li> <a href= "#" > Home </a></li>
<li> <a href= "#" > Search </a></li>
<li> <a href= "#" > member list </a></li>
<li> <a href= "#" > Hot Topics </a></li>
<li> <a href= "#" > Latest Topics </a></li>
</div>
<div class= "notice" >
<marquee scrollamount= "2" width= "100%" >
Welcome to Sclbbs.
</marquee>
</div>
<div class= "Content" >
<div class= "Contenthead" >
<div class= "F1" > Layout </div>
<div class= "F2" > Theme </div>
<div class= "F3" > Articles </div>
<div class= "F4" > Final release </div>
</div>
<div class= "Typeholder" >
<div class= "type" > Open source Project </div>
<div class= "Place" ></div>
</div>
<div class= "Boardholder" >
<div class= "boardname" >jforum forum </div>
<div class= "Subject" >23</div>
<div class= "article" >23</div>
<div class= "Last" >23</div>
</div>
<div class= "Typeholder" >
<div class= "type" > Open source Project 1</div>
<div class= "Place" ></div>
</div>
<div class= "Boardholder" >
<div class= "boardname" >jforum forum 1</div>
<div class= "Subject" >23</div>
<div class= "article" >23</div>
<div class= "Last" >23</div>
</div>
<div class= "Typeholder" >
<div class= "type" > Open source Project 2</div>
<div class= "Place" ></div>
</div>
<div class= "Boardholder" >
<div class= "boardname" >jforum forum 2</div>
<div class= "Subject" >23</div>
<div class= "article" >23</div>
<div class= "Last" >23</div>
</div>
<div class= "Typeholder" >
<div class= "type" > Open source Project 3</div>
<div class= "Place" ></div>
</div>
<div class= "Boardholder" >
<div class= "boardname" >jforum forum 3</div>
<div class= "Subject" >23</div>
<div class= "article" >23</div>
<div class= "Last" >23</div>
</div>
</div>
<div class= "MSG" >
<div class= "Typeholder" >
<div class= "Type" > see who's Online </div>
<div class= "Place" ></div>
</div>
<div class= "Boardholder" >
A total of 2,806 articles are currently published
A total of 4,186 registered members at present
Newly Registered members: Mxjccut
At present total 80 users online:: 1 Members, 79 visitors [system Administrator] [Moderator]
Maximum online 2,712 people [record time:: 2007-08-13 16:12:34]
Currently online registered members: Admin
</div>
</div>
<div class= "Footer" >
Powered by Sclbbs author:sclsch@188.com
</div>
</div>
</body>
Pictures can not upload, no way, does not affect learning.
This is the first layout I've designed, learned from this, Div is a block, the default is the entire line, if you want to design into two or more columns, you can use the Float property, it can float to the left (Float:left), if the following div size can be dropped, it will float to the above line, This creates a two-column layout,
Multiple columns and so on. Understand the basic, then you can learn in the direction of the fine. Hope to like me as a beginner of the art of Friends point of Help, do the development of the understanding of art is also very important, art more do not press body.
