Shulou(Shulou.com)06/01 Report--

What are the knowledge points of this article "html+css page layout knowledge?" most people do not understand, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "html+css page layout knowledge" article.

HTML CSS + DIV to realize the overall layout

1. Technical objectives:

Develop Web pages that conform to W3C standards

Understand the box model

Realize the overall layout of DIV+CSS

2. What is W3C standard?

W3C:World Wide Web Consortium, World wide Web Consortium

Function of W3C: responsible for developing and maintaining Web industry standards

The W3C standard includes a series of standards:

HTML content: XHTML

Style beautification: CSS

Structural document access: DOM

Page interaction: ECMAScript

…… Wait

3. The Web structure advocated by W3C should meet the following requirements:

XHTML is in charge of content organization.

CSS is responsible for page style

4. The structure of the page conforming to the W3C specification:

5. XHTML basic specification

Label signatures and attribute names must be lowercase

The HTML tag must be closed

Attribute values must be enclosed in quotation marks

Labels must be nested correctly

The document must have a root element, and all XHTML elements must be nested within the root element

Properties cannot be abbreviated, such as:

6. What should be paid attention to in page development:

Do not use obsolete tags:, etc., please refer to the official documentation (

Alt attribute of the tag: add an alt attribute to the picture

Separation of style and content: separate style from structure without using line class style

Name and id of a form: forms and form elements require name and id attributes to be set

Use CSS + DIV layout

Browser compatibility of pages

7. Why do you need a box model?

A web page can be seen as a "box", as shown in the figure:

As can be seen from the above picture, the page is divided into three parts: upper (website navigation), middle and lower (copyright notice).

The middle part is divided into left (commodity classification), middle (main part) and right.

These "boxes" contain all kinds of content, and the pages are pieced together by these "boxes".

8. Related properties of the box model

Margin (outer margin / boundary)

Border (border)

Padding (inside margin / fill)

Let's take a look at the figure to understand the role of each attribute:

The above attributes are divided into four directions: top, right, bottom and left.

Question: how to calculate the width width and height height of page elements?

Answer: actual occupancy size of element = element size + padding + border width

For example, the actual occupancy height of the element = height attribute + upper and lower padding + upper and lower border width

9. The hierarchical relationship of box model.

We understand it through a classic box model 3D solid structure diagram, as shown in the figure:

From the top down, the hierarchical relationship is as follows:

Layer 1: frame of the box (border)

Layer 2: content of the element (content), inner margin (padding)

Layer 3: background image (background-image)

Layer 4: background color (background-color)

Layer 5: the outer margin of the box (margin)

As can be seen from this hierarchical relationship, when the background image and background color are set at the same time, the background

The picture will be displayed above the background color

10. Margin outer margin

Can be set uniformly or separately on four sides, as shown in the figure:

For specific settings, please see the CSS help documentation (download is available at the bottom of the page)

11. Horizontal center and vertical center

Horizontal centering includes two situations:

Horizontal center of block-level elements: margin:0px auto

The level of text content is in the middle: text-align: center

Center vertically:

The vertical centering of the common single-line text can set the height of the line of the text and

Row height style properties are consistent, such as:

Div {

Width: 400px

Height: 400px

Line-height: 400px

}

12. analysis of the home page layout of the case.

Only the layout analysis of DIV is retained:

13. Home page layout CSS + DIV code analysis

HTML structure code:

Top (header)

Body part (main)

Bottom (footer)

CSS style Code:

# container {

Width:980px

Margin:0px auto

}

# header {

Width:100%

Height:150px

Border:1px # F00 solid

}

# main {

Width:100%

Height:400px

Border:1px # F00 solid

}

# footer {

Width:100%

Height:100px

Border:1px # F00 solid

}

14. Why do I need the float floating property?

Let's take a look at the following picture:

Question: how to make the item classification DIV, content DIV and right DIV side by side?

Answer: use float (floating) style

15. Floating attribute

The first thing to understand floating attributes is to figure out, what is a document stream?

Document flow: browsers based on the order in which elements appear in html documents

Arranged from left to right and from top to bottom

The floating property is a positioning property in CSS, and its usage is as follows:

Float: floating direction (left, right, none)

Left floats on the left, right floats on the right, and none does not float if it is the default

To set the float of the element, which will move left or right away from the document stream

Until its outer margin touches the border of the parent element or the edge of another floating element

Frame up to

Floating example, without using the floating 3 DIV:

HTML structure code:

Block 1 div

Block 2 div

Block 3 div

CSS style Code:

# first, # second, # third {

Width:100px

Height:50px

Border:1px # 333 solid

Margin:5px

}

The execution effect is as shown in the figure:

Add float:left to the style

The execution effect is as shown in the figure:

Change it to float: right to see what the effect of floating on the right is.

16. Let the commodity category DIV, content DIV and right DIV be placed side by side

HTML structure code:

CSS style code (added to section 13 CSS code):

. Cat, .sidebar {

Float:left

Width:20%

Height:100%

}

. Content {

Float:left

Width:60%

Height:100%

}

17. Clear cleanup

Clear is valid only for block-level elements, indicating line wrapping if the previous element floats to the left or right

Values of clear attribute: rigth, left, both, none

The above is about the content of this article "what is the knowledge of html+css page layout?", I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.