Home > Developer > Web Develop
To complete a simple home page is not difficult, we just find the method is very easy to complete a simple website homepage We just have the overall layout of the home page with Div+css and then fill the content then a simple homepage can be completed, then we step by step to achieve them, First of all, we divide the homepage into several chunks from the macroscopic angle, the following case we divide the homepage into three chunks:
650) this.width=650; "style=" WIDTH:361PX;FLOAT:NONE;HEIGHT:367PX; "title=" 15.jpg "src=" http://s3.51cto.com/wyfs02/ M02/49/f8/wkiom1qgpichawa4aadf-05yqbw926.jpg "width=" 357 "height=" 315 "alt=" wkiom1qgpichawa4aadf-05yqbw926.jpg "/ >650) this.width=650; "style=" width:329px;float:none;height:362px; "title=" 14.jpg "src=" http://s3.51cto.com/ Wyfs02/m02/49/f9/wkiol1qgpkhjeyalaaeko856-0c652.jpg "width=" 321 "height=" 362 "alt=" Wkiol1qgpkhjeyalaaeko856-0c652.jpg "/>
This homepage we first regardless of place big picture of part, we will this simple homepage divides three big pieces, so we need to have a biggest div contains we want to build three chunks of Div, we will the largest div named "container" container meaning, Then the other three div according to the custom named header, Main, footer:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<body>
<div id= "Container" >
<div id= "Header" ></div>
<div id= "main" > </div>
<div id= "Footer" ></div>
</div>
</body>
When we're finished, we'll give these four div a size color:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style>
#container {
width:960px;
Background:grey;
}
#header {
height:120px;
Background:orange;
}
#main {
height:720px;
Background:green;
}
#lside {
width:780px;
height:720px;
}
#footer {
height:120px;
Background:blue;
}
</style>
<body>
<div id= "Container" >
<div id= "Header" ></div>
<div id= "main" ></div>
<div id= "Footer" ></div>
</div>
</body>
So the effect is to be presented by the film:
650) this.width=650; "style=" width:631px;height:348px; "title=" 16.jpg "src=" http://s3.51cto.com/wyfs02/M00/49/F8/ Wkiom1qgqytsvd4eaadexdolvga650.jpg "width=" 688 "height=" 381 "alt=" wkiom1qgqytsvd4eaadexdolvga650.jpg "/>
Now there are three big pieces, and then we look at what we want to do the home page, three pieces of the middle of a piece is divided into two pieces, two pieces of the left piece is divided into four pieces:
650) this.width=650; "title=" 17.jpg "src=" http://s3.51cto.com/wyfs02/M02/49/F9/wKioL1QgqrzwLmfSAAHlOb_tj0M335.jpg "alt=" Wkiol1qgqrzwlmfsaahlob_tj0m335.jpg "/>
Then we start to implement these Div, to see the effect:650) this.width=650; "style=" width:664px;height:211px; "title=" 18.jpg "src=" http://s3.51cto.com/wyfs02/M01/49/F8/ Wkiom1qgrjkxvzp7aadcaup-5f8096.jpg "width=" 831 "height=" 305 "alt=" Wkiom1qgrjkxvzp7aadcaup-5f8096.jpg "/>
Well, the preliminary effect has already, then you can see that we are not in the browser center display but on the left, if we can also be used to offset the center, but if you change a computer or a browser may not be centered, then how to do the center, We can use a special attribute in margin, let's look at:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style>
#container {
width:960px;
Background:grey;
margin:0 Auto;
}
#header {
height:120px;
Background:orange;
}
#main {
height:720px;
Background:green;
}
#lside {
Float:left;
width:780px;
height:720px;
Background:pink;
}
. four{
width:300px;
height:300px;
Background:white;
margin:10px;
Float:left;
padding:20px;
}
#rside {
Float:right;
width:180px;
height:720px;
Background:purple;
}
#footer {
height:120px;
Background:blue;
}
</style>
<body>
<div id= "Container" >
<div id= "Header" ></div>
<div id= "Main" >
<div id= "Lside" >
<div class= "Four" > when faced with two choices, a coin toss always works, because in the second you leave it in the air, you suddenly know what you want it to be. </div>
<div class= "Four" > when faced with two choices, a coin toss always works, because in the second you leave it in the air, you suddenly know what you want it to be. </div>
<div class= "Four" > when faced with two choices, a coin toss always works, because in the second you leave it in the air, you suddenly know what you want it to be. </div>
<div class= "Four" > when faced with two choices, a coin toss always works, because in the second you leave it in the air, you suddenly know what you want it to be. </div>
</div>
<div id= "Rside" ></div>
</div>
<div id= "Footer" ></div>
</div>
</body>
Well, after adjusting and centering, then look at the effect we have now:
650) this.width=650; "title=" 19.jpg "src=" http://s3.51cto.com/wyfs02/M00/49/F9/wKioL1Qgrojifbd1AAHKGiJNCBU757.jpg "Width=" 680 "height=" 414 "alt=" wkiol1qgrojifbd1aahkgijncbu757.jpg "/>
Well, now our simple home page layout is almost complete, then add content and so on ...
This article from "Don't Make good" blog, declined reprint!
Div+css Complete Home Layout
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
