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

This article will explain in detail how HTML uses div elements to achieve layout. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Use the HTML layout of the element

Note: elements are often used as layout tools because they can be easily located through CSS.

This example uses four elements to create a multi-column layout:

# header {background-color:#1aaa11; color:white; text-align:center; padding:5px;} # nav {line-height:30px; background-color:#eeeeee; color:#faaaff; height:300px; width:100px; float:left; padding:5px;} # section {width:350px; float:left; padding:10px;} # footer {background-color:#166611; color:white; clear:both; text-align:center; padding:5px;} Tianhua Information Education Group 1

Group 2

Group 3

This is the title.

This is the content.

This is the content.

Tianhua information education

HTML basic tutorial: div elements to implement layout

HTML5 semantic elements

Header defines the header of a document or section

Nav defines a container for navigation links

Section defines sections in a document

Article defines independent self-contained articles

Aside defines something other than content (such as a sidebar)

Footer defines the footer of a document or section

Details defines additional details

Summary defines the title of the details element

Header {background-color:#1aaa11; color:white; text-align:center; padding:5px;} nav {line-height:30px; background-color:#eeeeee; color:#faaaff; height:300px; width:100px; float:left; padding:5px;} section {width:350px; float:left; padding:10px;} footer {background-color:#166611; color:white; clear:both; text-align:center; padding:5px } Tianhua Information Education Group 1, Group 2, Group 3, this is the title

This is the content.

This is the content.

Tianhua information education

This is the end of this article on "how HTML uses div elements to achieve layout". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.