Home > Developer > JavaScript
Use DIV to implement simple webpage layout and use div webpage Layout
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> GIS Feng </title>
Set DIV styles
<Style>
Body {margin: 0; padding: 0 ;}
. Header {margin: 0 100px; height: 120px; background-color: #369 ;}
. Header1,. Header2,. Header3,. Header4 {height: 30px ;}
. Header2 {background-color: blue ;}
. Header3 {background-color: yellow ;}
. Header4 {background-color: red ;}
. Header1 {background-color: orange ;}
. Footer {margin: 0 100px; height: 70px; background-color: #369 ;}
. Left,. Right {
Position: absolute;
Top: 120px;
Width: 100px;
Height: 300px;
Background-color: pink;
}
. Left {left: 0 ;}
. Right {right: 0 ;}
. Cont {margin: 0 100px ;}
. Con1,. con2 {height: 150px ;}
. Con1 {background-color: silver ;}
. Con2 {background-color: slateGrey ;}
. Head1,. Head2 {
Position: absolute;
Top: 0px;
Width: 100px;
Height: 120px;
Background-color: silver;
}
. Head1 {left: 0 ;}
. Head2 {right: 0 ;}
. Head3,. Head4 {
Position: absolute;
Top: 420px;
Width: 100px;
Height: 70px;
Background-color: pink;
}
. Head3 {left: 0 ;}
. Head4 {right: 0 ;}
</Style>
</Head>
<Body>
<Div class = "Head1"> Head1 </div>
<Div class = "Header">
<Div class = "Header1"> Header1 </div>
<Div class = "Header2"> Header2 </div>
<Div class = "Header3"> Header3 </div>
<Div class = "Header4"> Header4 </div>
</Div>
<Div class = "Head2"> Head2 </div>
<Div class = "Left"> Left </div>
<Div class = "Cont">
<Div class = "con1"> con1 </div>
<Div class = "con2"> con2 </div>
</Div>
<Div class = "Right"> Right </div>
<Div class = "Footer"> Footer </div>
<Div class = "Head4"> Head4 </div>
<Div class = "Head3"> Head3 </div>
</Body>
</Html>
The effect is as follows:
Common attributes of DIV:
1. margin: used to set the extension margin of the DIV, that is, the distance to the parent container. Margin: the distance between the backend and the left side of the parent container is the distance from top to right to bottom of the parent container. margin: [top] [right] [bottom] [left]
2. Height: Set the DIV Height. Width: Set the DIV Width.
3. background: Set the background style of the DIV. After the background, you can directly follow the background color, background image, tile mode, and other styles. You can also set them with the following attributes.
4. position: Set the position of the DIV. Position has four attributes: static, fixed, relative, and absolute. Commonly used relative and absolute. If static is specified, DIV follows the HTML rule. If relative is specified, you can use top, left, right, and bottom to set the offset of DIV on the page (relative to its own offset ), however, the layer is unavailable at this time. If it is specified as absolute, you can use top, left, right, and bottom to absolutely locate the DIV (the parent element closest to yourself ); if it is specified as fixed, the position of the DIV in IE7 and FF remains unchanged from that on the screen. IE6 has no effect (for some reason ).
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
