DIV + CSS layout-fixed page opening layout, divcss
Main CSS attributes in DIV + CSS layout:
Float:
The Float attribute is the most basic and commonly used attribute in DIV + CSS layout. It is used to implement the multi-column function. We know that <div> A tag can only display one row by default, the Float attribute can be used to display multiple divs in one row. The most direct interpretation method is to implement the multi-column function of table layout.
Margin:
The Margin attribute is used to set the distance between two elements.
Padding:
The Padding attribute is used to set the distance between an element's border and its content.
Clear:
If you use the Float attribute to set a row with multiple DIV columns (multiple columns), you 'd better use the Clear Attribute before the next row starts. Otherwise, the above layout will affect the following.
Simple operation example: If you use an instance for a simple and basic layout, the effect is as follows:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
"" > <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <Title> DIV + CSS layout tutorial </title> <style type= "text/css" > #Container{ width:1000px; margin: 0 auto; /* Set the entire container to horizontally center in the browser */ background:#CF3; } #Header{ height:80px; background:#093; } #logo{ padding-left:50px; padding-top:20px; padding-bottom:50px; } #Content{ height:600px; /* The height of the container is set here. Generally, the container height is not recommended. Generally, the overflow: auto attribute is used to set the adaptive height of the container Based on the content, if the height is not specified or the adaptive height is not set, the container defaults to a 1-character height, and the layout element (footer) below the container sets margin-top: the attribute will be invalid */ Margin-top: 20px;/* describes margin usage and sets the distance between content and the preceding header elements */ background:#0FF; } #Content-Left{ height:400px; width:200px; Margin: 20px;/* set the distance between an element and other elements to 20 pixels */ Float: left;/* Set float to achieve multi-column effects. It is very important in div + Css layout */ background:#90C; } #Content-Main{ height:400px; width:720px; Margin: 20px;/* set the distance between an element and other elements to 20 pixels */ Float: left;/* Set float to achieve multi-column effects. It is very important in div + Css layout */ background:#90C; } /* Note: The Content-Left and Content-Main elements are child elements of the Content element. The two elements use float: left; and are set to two columns, the width of the two elements and the padding, margin, and of the two elements must not be greater than the width of the Content element of the parent layer. Otherwise, the setting column will fail */ #Footer{ height:40px; background:#90C; margin-top:20px; } .Clear{ clear:both; } </style> <body> <div id= "Container" > <div id= "Header" > <div id= "logo" > Here we set the padding attribute to introduce the usage of padding. padding sets the distance between the text and the border. </Div> </div> <div id= "Content" > <div id= "Content-Left" >Content-Left</div> <div id= "Content-Main" >Content-Main</div> </div> <div class = "Clear" > <! -- How do you use float , It is best to clear the following layout before it starts. --> </Div> <div id= "Footer" >Footer</div> </div> </body> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" > "" > <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <Title> DIV + CSS layout process </title> <style type= "text/css" > #Container{ width:1000px; margin: 0 auto; /* Set the entire container to horizontally center in the browser */ background:#CF3; } #Header{ height:80px; background:#093; } #logo{ padding-left:50px; padding-top:20px; padding-bottom:50px; } #Content{ height:600px; /* The height of the container is set here. Generally, the container height is not recommended. Generally, the overflow: auto attribute is used to set the adaptive height of the container Based on the content, if the height is not specified or the adaptive height is not set, the container defaults to a 1-character height, and the layout element (footer) below the container sets margin-top: the attribute will be invalid */ Margin-top: 20px;/* describes margin usage and sets the distance between content and the preceding header elements */ background:#0FF; } #Content-Left{ height:400px; width:200px; Margin: 20px;/* set the distance between an element and other elements to 20 pixels */ Float: left;/* Set float to achieve multi-column effects. It is very important in div + Css layout */ background:#90C; } #Content-Main{ height:400px; width:720px; Margin: 20px;/* set the distance between an element and other elements to 20 pixels */ Float: left;/* Set float to achieve multi-column effects. It is very important in div + Css layout */ background:#90C; } /* Note: The Content-Left and Content-Main elements are child elements of the Content element. The two elements use float: left; and are set to two columns, the width of the two elements and the padding, margin, and of the two elements must not be greater than the width of the Content element of the parent layer. Otherwise, the setting column will fail */ #Footer{ height:40px; background:#90C; margin-top:20px; } .Clear{ clear:both; } </style> <body> <div id= "Container" > <div id= "Header" > <div id= "logo" > Here we set the padding attribute to introduce the usage of padding. padding sets the distance between the text and the border. </Div> </div> <div id= "Content" > <div id= "Content-Left" >Content-Left</div> <div id= "Content-Main" >Content-Main</div> </div> <div class = "Clear" > <! -- How do you use float , It is best to clear the following layout before it starts. --> </Div> <div id= "Footer" >Footer</div> </div> </body> Note: As the Container of the entire page, Container controls the location of the entire page in the browser. Here, margin: 0 auto is used to control the horizontal center of the Container in the browser, this code is usually used for fixed-width la S. 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
