Home > Developer > Web Develop
HTML CSS + div for overall layout
1. Technical objectives:
2, what is the standard?
W3c:world Wide web Consortium, www Alliance
Function: Responsible for the development and maintenance of web industry standards
The standards include a range of criteria:
3. The web structure advocated by the website should meet the following requirements:
4, according to the structure of the Web page specification:
HTML code[HTML] view plain copy
5. XHTML Basic Specification
<input checked= "Checked"/>
<input readonly= "ReadOnly"/>
<option selected= "Selected"/>
6, the page development needs to note the place:
7. Why do I need a box model?
The Web page can be viewed as a "box" consisting of
As can be seen, the page is divided into (site navigation), Medium and lower (copyright notice) Three parts,
The middle part is divided into left (commodity classification), medium (main part), right, these sections are like each
boxes, these "boxes" are placed in a variety of content, the page is made up of these "boxes" together
8. Related properties of box model
Let's take a look at the function of each attribute:
The above attributes are divided into top, right, bottom, and left four directions
Question: How is the width and height of the page element calculated?
Answer: element's actual placeholder size = element size + padding + border width
For example: element actual placeholder height = height attribute + upper and lower padding + upper and lower border width
9. Hierarchical Relationship of Box model
We understand it through a classic box-model 3D stereoscopic structure diagram,
From the top down, the hierarchical relationship is as follows:
1th Floor: Box Border (border),
Level 2nd: Content of elements, padding (padding)
3rd Floor: Background map (background-image)
Layer 4th: Background color (background-color)
5th floor: Margin of box (margin)
As you can see from this hierarchical relationship, the background and background colors are set at the same time.
The graph will appear above the background color
10. Margin margin
Can be set uniformly or four sides apart,
Specific settings to view the CSS Help document (download available below the page)
11, Horizontal Center and vertical Center
Horizontal centering consists of two cases:
Horizontal centering of block-level elements: margin:0px auto;
Horizontal center of text content: Text-align:center;
Center vertically:
Vertical centering of common single-line text sets the height of the line in which the text is located and
Row high style properties are consistent, such as:
div{
width:400px;
HEIGHT:60RPX;
line-height:400px; /* Row height is consistent with div height */
}
12, the case of the first page layout analysis
Leave only the DIV's layout analysis:
13. Homepage layout css + div Code Analysis
HTML Structure Code:
<div id= "Container" >
<div id= "header" > Top (header) </div>
<div id= "main" > Body part (Main) </div>
<div id= "Footer" > Bottom (Footer) </div>
</div>
CSS style code:
/* main panel style */
#container {
width:980px;
margin:0px auto;/* Main Panel Div Center */
}
/* Top Panel style */
#header {
width:100%;
height:150px;
border:1px #F00 Solid;
}
/* middle section Panel style */
#main {
width:100%;
height:400px;
border:1px #F00 Solid;
}
/* Bottom Panel style */
#footer {
width:100%;
height:100px;
border:1px #F00 Solid;
}
14. Why float float property is required?
Let's take a look at:
question: How do I place a category Div, a content div, and a right div on the left side?
Answer: use float (float) style
15. Floating Properties
Understanding floating properties First of all, what is a document flow?
Document Flow: The browser is based on the order in which the elements appear in the HTML document.
From left to right, from top to bottom, in sequence
The floating property is the positional property in the CSS, and is used as follows:
float: Floating direction (left, right, none);
Left is floating, right is floating, none is the default value means no float
, sets the float of the element that moves away from the document stream, left or right
Until its outer margin touches the border of the parent element or the edge of another floating element
Box until
Floating example, no floating 3 div is used:
HTML Structure Code:
<div id= "First" > 1th block div</div>
<div id= "Second" > 2nd block div</div>
<div id= "Third" > 3rd block div</div>
CSS style code:
#first, #second, #third {
width:100px;
height:50px;
border:1px #333 Solid;
margin:5px;
}
Execution effect
Add Float:left to the style;
Execution effect
You re-modify the float:right to try right float what effect
16. Let the category Div, Content div and right div side
HTML Structure Code:
Java code[Java] view plain copy
CSS style code (added based on the 13th section of CSS Code):
. Cat,. Sidebar {
Float:left;
width:20%;
height:100%;
}
. Content {
Float:left;
width:60%;
height:100%;
}
17. Clear Erase
Clear is only valid for block-level elements, which means that if the previous element has a left or right float, the newline
The value of the Clear property: Rigth, left, both, none
18. Summary
HTML CSS + div for overall 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
