Shulou(Shulou.com)05/31 Report--

This article mainly explains "html5 how to make the head and tail fixed". The explanation in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how html5 makes the head and tail fixed".

Fixed method: 1, use header tags to define high-quality content of the document, and add "position:fixed;top:0;" style to make it fixed; 2, use footer tags to define tail content, and add "position:fixed; bottom: 0;" style to make it fixed.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

Html5's method of keeping the head and tail fixed:

1. Keep the head fixed

Use the header tag to define the header and add the "position:fixed;top: 0;" style to keep it fixed

Body {height: 1500px;} header {width: 100% width: # FFC0CB;position: fixed;top: 0;} website title

Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text! Test the text!

Description:

Header: the tag defines the header of the "web page" or "section".

It usually contains h2-h7 elements or hgroup as the title of the entire page or a block of content. You can also wrap the catalog section of a section, a search box, a nav, or any related logo.

2. Keep the tail fixed

Use the footer tag to define the tail content and add the "position:fixed;bottom: 0;" style to keep it fixed

Footer {width: 100% position height: 100pxscape: paleturquoise;position: fixed;bottom: 0;} content at the end of the document

Description:

Footer tag: the footer that represents "web page" or "section".

It usually contains some basic information about this section, such as the author, links to related documents, and copyright materials.

If the footer element contains the entire section, then they represent appendices, indexes, promotions, license agreements, tags, categories, and other similar information.

Expand knowledge: fixed positioning:

When the element's position attribute is set to fixed, the element is pinned and the pinned element does not change its position as the scroll bar is dragged. In the field of vision, the position of the fixed positioning element will not change.

Fixed fixed positioning is similar to absolute absolute positioning in that they can shift elements and detach them from the document stream.

Position:fixed;top: pixel value; bottom; pixel value; left: pixel value; right: pixel value

"position:fixed;" is used in conjunction with the four attributes top, bottom, left, and right, where "position:fixed;" makes the element a fixed positioning element, and then uses the top, bottom, left, and right attributes to set the position of the element relative to the browser.

Top, bottom, left, and right may not all be used. Note that the reference objects for these four values are the four edges of the browser.

Thank you for your reading, the above is the content of "how to make the head and tail fixed by html5". After the study of this article, I believe you have a deeper understanding of how to make the head and tail fixed by html5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.