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

This article mainly introduces how to do the page layout in html5, the article is very detailed, has a certain reference value, interested friends must read it!

The rendered web page in the browser consists of many things-logo, informational text, pictures, hyperlinks, navigation structure, and so on.

HTML5 provides a series of tags for web pages that allow you to create structured layouts. These elements are often referred to as semantic tags because they clearly convey their meaning and purpose to developers and browsers. This article discusses some important HTML5 tags that help with the layout of a web page.

New elements of HTML5 and their characteristics

The semantic tags and attributes of HTML5 make it very convenient for developers to achieve a clear layout of web pages. Coupled with the rendering of CSS3 effects, it is very simple to quickly build rich and flexible web pages.

The new tag elements of this learning HTML5 are:

Define the header of a page or section

Define the end of a page or section

Define the navigation area of a page or section

The logical area or content combination of a page

To define a text or a complete article.

Define supplementary or related content

The best way to learn these tags is, of course, to try to use them. Although there are many ready-made web layout templates that can be easily used, it is absolutely necessary for beginners to achieve a simple page layout.

Here is a simple example of page layout to show the use of the above tags.

Example: imitate the layout of the home page of a blog

Implement the web page structure shown in figure 2-1, which is a very typical blog page: header, tail, horizontal navigation bar, sidebar navigation, and content.

Figure 2-1

As you can see in figure 2-1, the area implemented by the corresponding tag is marked with a name, such as the header Header

Before writing a page, it is necessary to say: the page element is realized by HTML5, and the display effect of the element is rendered by CSS3. The code of CSS3 can be placed in the same file with the code of HTML5, or it can be a separate file, as long as it is referenced in the HTML5 file. It is suggested that it is best to have separate documents, which have the following advantages:

1) comply with the principle of single responsibility: HTML5 pages are responsible for managing elements, while CSS3 files are only responsible for rendering the corresponding HTML5 files, which are independent of each other and do not intersect each other.

2) reduce the complexity of the page, easy to maintain: imagine, when the number of elements on the page increases to a lot, while managing the elements and the display attributes of the elements in a page, how bad the readability should be, the later maintenance will be very painful.

3) Speed up the loading speed of browsers: another benefit of point 2) is that simple pages load faster naturally.

Of course, it's okay to get used to putting HTML5+CSS3 in a file, and this is just a suggestion.

Let's implement figure 2-1.

Divided into two parts: 1) HTML5 file; 2) CSS3 file

I. HTML5 part

1. Document declaration of HTML5

To create a new index.html file, if the webpage authoring tool you use already supports the HTML5 file type, you should generate the following HTML5 template:

one

two

three

four

five

six

seven

eight

nine

one

two

three

four

5 Layout TEST

six

seven

eight

nine

It doesn't matter if the webpage authoring tool doesn't support HTML5 for the time being, and it's easy to write these lines of code yourself.

Description: the first line: HTML5 simplifies the document type and simplifies the complexity; (the role of the document type: the validator determines which rules should be used to validate the code; forces the browser to render the page in standard mode)

two。 Head

Label implementation

one

two

three

Header

Explanation: 1) header should not be confused with the titles of h _ 2 ~ 7, h _ 3, and h _ 4. It can include everything from the company logo to the search box. Only the title is included in the example.

2) the same page can contain multiple elements. Each separate block or article can contain its own. Therefore, in the example, a unique id attribute is added to facilitate flexible rendering in CSS3. You will see the role of the id tag in the CSS file.

3. Tail part

Label implementation

one

two

three

Footer

Description: the location is the end of the page or block, the usage is the same as the basic, will also contain other elements, id is also specified here.

4. Navigation

Label implementation

one

two

three

four

five

six

seven

eight

Home

One

Two

Three

Explanation: the importance of navigation is very important for a web page, and fast and convenient navigation is necessary to retain visitors.

1) can be included in or or other blocks, and a page can have multiple navigation.

2) Navigation generally requires CSS to render, and then you will see the rendering of CSS.

5. Blocks and articles

And tag implementation

one

two

three

four

five

six

seven

eight

nine

/ * can contain multiple

< article>

, /

/ * content of article * /

/ * content of article * /

The element classifies the content of the page reasonably and arranges it reasonably.

The following is the general content of

one

two

three

four

five

six

seven

eight

nine

ten

Article Header

Without you?I'd be a soul without a purpose.

Article Footer

You can see that it can contain many elements.

6. Narrator and sidebar

The label is narrated, and the sidebar is implemented by.

Is the main content to add additional information, into the introduction, pictures, etc.

one

two

three

four

Sth. In aside

It is generally added to the

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

Article Header

Sth. In aside

Without you?I'd be a soul without a purpose.

Article Footer

Sidebar, not narrator! Think of it as an area on the right, containing links, use and implementation.

one

two

three

four

five

six

seven

eight

nine

ten

April 2012

March 2012

February 2012

January 2012

So far, this is the use of each tag. Here is the complete code index.html file for HTML5.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

thirty-seven

thirty-eight

thirty-nine

forty

forty-one

forty-two

forty-three

forty-four

forty-five

forty-six

forty-seven

forty-eight

forty-nine

fifty

fifty-one

fifty-two

fifty-three

fifty-four

fifty-five

fifty-six

fifty-seven

fifty-eight

fifty-nine

sixty

sixty-one

sixty-two

sixty-three

sixty-four

sixty-five

sixty-six

sixty-seven

sixty-eight

sixty-nine

seventy

seventy-one

seventy-two

seventy-three

seventy-four

Layout TEST

Body

Header

Home

One

Two

Three

Section

Article

Article Header

Article Aside

Without you?I'd be a soul without a purpose.

Article Footer

Article

Article Header

Article Aside

Without you?I'd be a soul without a purpose.

Article Footer

Section

Sidebar Header

April 2012

March 2012

February 2012

January 2012

Footer

II. CSS3 part

For CSS files, it is best to render element attributes in an organized and hierarchical manner according to the tree structure of HTML files and corresponding elements. In this way, elements are not omitted, and it is easy to find and modify them. Of course, it's good to decide according to your own habits.

CSS3 has a richer definition of attributes, so I won't repeat it here. There is a CSS3 reference manual online, so just look it up when you use it. Or, don't even bother to check, there are special CSS3 control code generation tools and websites, such as http://css-tricks.com/examples/, rich examples of control effects can be downloaded. You can also search for something similar.

Post the CSS3 code style.css file directly here

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

thirty-seven

thirty-eight

thirty-nine

forty

forty-one

forty-two

forty-three

forty-four

forty-five

forty-six

forty-seven

forty-eight

forty-nine

fifty

fifty-one

fifty-two

fifty-three

fifty-four

fifty-five

fifty-six

fifty-seven

fifty-eight

fifty-nine

sixty

sixty-one

sixty-two

sixty-three

sixty-four

sixty-five

sixty-six

sixty-seven

sixty-eight

sixty-nine

seventy

seventy-one

seventy-two

seventy-three

seventy-four

seventy-five

seventy-six

seventy-seven

seventy-eight

seventy-nine

eighty

eighty-one

eighty-two

eighty-three

eighty-four

eighty-five

eighty-six

eighty-seven

eighty-eight

eighty-nine

ninety

ninety-one

ninety-two

ninety-three

ninety-four

ninety-five

@ charset "utf-8"

/ * CSS Document * /

Body {/ * property settings for the entire page * /

Background-color: # CCCCCC; / * background color * /

Font-family: Geneva, sans-serif; / * available fonts * /

Margin: 10px auto; / * margin * /

Max-width: 800px

Border: solid; / * Edge solid * /

Border-color: # FFFFFF; / * Edge Color * /

}

H3 {/ * set the common properties of h3 throughout the body * /

Text-align: center; / * text centered * /

}

Header {/ * header is applicable to the entire body page * /

Background-color: # F47D31

Color: # FFFFFF

Text-align: center

}

Article {/ * article is applicable to the entire body page * /

Background-color: # eee

}

P {/ * the p of the entire body page applies * /

Color: # F36

}

Nav,article,aside {/ * Common attributes * /

Margin: 10px

Padding: 10px

Display: block

}

Header#page_header nav {/ * attributes of header#page_header nav * /

List-style: none

Margin: 0

Padding: 0

}

Header#page_header nav ul li {/ * header#page_header nav ul li attribute * /

Padding: 0

Margin: 0 20px 0 0

Display: inline

}

Section attribute of section#posts {/ * # posts * /

Display: block

Float: left

Width: 70%

Height: auto

Background-color: # F69

}

Section#posts article footer {/ * section#posts article footer attribute * /

Background-color: # 039

Clear: both

Height: 50px

Display: block

Color: # FFFFFF

Text-align: center

Padding: 15px

}

Section#posts aside {/ * section#posts aside attribute * /

Background-color: # 069

Display: block

Float: right

Width: 35%

Margin-left: 5%

Font-size: 20px

Line-height: 40px

}

Section#sidebar {/ * section#sidebar attribute * /

Background-color: # eee

Display: block

Float: right

Width: 25%

Height: auto

Background-color: # 699

Margin-right: 15px

}

Footer#page_footer {/ * footer#page_footer attribute * /

Display: block

Clear: both

Width: 100%

Margin-top: 15px

Display: block

Color: # FFFFFF

Text-align: center

Background-color: # 06C

The above is all the content of the article "how to do the page layout in html5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.