HTML CSS + div for overall layout

Source: Internet
Author: User

HTML CSS + div for overall layout

1. Technical objectives:

    • Develop Web pages that meet the standards
    • Understanding the Box model
    • Achieve DIV+CSS Overall layout

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:

    • HTML content aspect: XHTML
    • Styling aspects: CSS
    • Structure document access aspects: DOM
    • Page interactivity: ECMAScript
    • ...... Wait a minute


3. The web structure advocated by the website should meet the following requirements:

    • XHTML is responsible for content organization
    • CSS is responsible for page styles


4, according to the structure of the Web page specification:

HTML code

  1. <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
  2. "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <metahttp-equiv= "content-type"content= "text/html;
  6. charset=gb2312 "/>
  7. <title> Untitled document </title>
  8. </head>
  9. <body>
  10. ...... Page Content Section
  11. </Body>
  12. </html>
[HTML]View PlainCopy
  1. <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
  2. "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv= "content-type" content= "text/html;
  6. charset=gb2312 " />
  7. <title> Untitled document </title>
  8. </head>
  9. <body>
  10. ...... Page Content Section
  11. </Body>
  12. </html>

5. XHTML Basic Specification

    1. The label signature and attribute name must be lowercase
    2. HTML tags must be closed
    3. Attribute values must be enclosed in quotation marks.
    4. Labels must be nested correctly
    5. The document must have a root element, and all XHTML elements must be nested within the
    6. Attributes cannot be abbreviated, such as:

<input checked= "Checked"/>
<input readonly= "ReadOnly"/>
<option selected= "Selected"/>

6, the page development needs to note the place:

    • Do not use obsolete tags:<b>, <font>, <marquee>, etc., can refer to the Official document (http://www.w3c.org)
    • < img/> Label alt attribute: Add alt attribute to picture
    • Style and content separation: separating styles and structures without using row class styles
    • Name and ID of the form: form and form elements require setting the name and ID property
    • Using CSS + div layout
    • Browser compatibility for pages


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

    • Margin (margin/boundary)
    • Border (border)
    • Padding (inner margin/padding)

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:400px;
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:



Questions:How do I place a category Div, a content div, and a right div side-by?
Answer:Use float (float) style

15. Floating Properties

Understanding floating properties First of all to figure out what isdocument 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 an 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

  1. <div id="container" >
  2. <div id="header" > Top (header) </div>
  3. <div id="main" >
  4. <div class="cat" > Product category (CAT) </div>
  5. <div class="Content" > Contents </div>
  6. <div class="sidebar" > Right (Sidebar) </div>
  7. </div>
  8. <div id="Footer" > Bottom (footer) </div>
  9. </div>
[Java]View PlainCopy
  1. <div id="container" >
  2. <div id="header" > Top (header) </div>
  3. <div id="main" >
  4. <div class="cat" > Product category (CAT) </div>
  5. <div class="Content" > Contents </div>
  6. <div class="sidebar" > Right (Sidebar) </div>
  7. </div>
  8. <div id="Footer" > Bottom (footer) </div>
  9. </div>


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

      • What are the properties of the box model? What properties are included in each property?
      • Where is the float property applied? What are the values?
      • Where is the clear attribute applied? What are the values?

HTML CSS + div for overall layout

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.