Home > Developer > Web Develop
In this example, the layout of the div+css is realized by the HTML code layout, which is the upper and lower structure , top: header; bottom:footer tail; medium: Content, divided into three structures, left and right
Is
Let's take a look at the code
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Index</title> <styletype= "Text/css"> *{margin:0;padding:0; }
<!--the overall Div, setting the percentage of the screen for the entire page, and centering--
. Container{width:70%;margin:Auto; }. Content{background:#ebebeb;Overflow:Hidden; }. Content. middle,.content. left,.content. Right{float: Left;Min-height:200px;Margin-bottom:-100000px;Padding-bottom:100000px; }. Content. Middle{background:Blueviolet;width:100%;Height:Auto; }. Content. Middle. Inner{Padding-left:100px;Padding-right:100px; }. Content. Left{background:Burlywood;width:100px;Margin-left:-100%; }. Content. Right{background:Brown;width:100px;Margin-left:-100px; }Header{Height:100px;background:Greenyellow; }Footer{Height:100px;background:Darkolivegreen; } </style></Head><Body> <Divclass= "Container"> <Header>Head</Header> <Divclass= "Content"> <Divclass= "Middle"> <Divclass= "inner"></Div> </Div> <Divclass= "Left">Zosto left left</Div> <Divclass= "Right">Right</Div> </Div> <Footer>Tail</Footer> </Div></Body></HTML>
DIV+CSS for dual-wing layouts
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
