How HTML uses div elements to implement layouts
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.
