Example Analysis of HTML layout
This article mainly introduces the example analysis of HTML layout, which is very detailed and has certain reference value. Friends who are interested must finish it!
Websites often display content in multiple columns (like magazines and newspapers).
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:
Example
City Gallery
London
Paris
Tokyo
London
London is the capital city of England. It is the most populous city in the United Kingdom
With a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia
Its history going back to its founding by the Romans, who named it Londinium.
Copyright W3School.com.cn
Try it yourself.
CSS:
# header {
Background-color:black
Color:white
Text-align:center
Padding:5px
}
# nav {
Line-height:30px
Background-color:#eeeeee
Height:300px
Width:100px
Float:left
Padding:5px
}
# section {
Width:350px
Float:left
Padding:10px
}
# footer {
Background-color:black
Color:white
Clear:both
Text-align:center
Padding:5px
}
Site layout using HTML5
The new semantic elements provided by HTML5 define different parts of the web page:
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
This example uses, and to create a multi-column layout:
Example
City Gallery
London
Paris
Tokyo
London
London is the capital city of England. It is the most populous city in the United Kingdom
With a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia
Its history going back to its founding by the Romans, who named it Londinium.
Copyright W3School.com.cn
Try it yourself.
CSS
Header {
Background-color:black
Color:white
Text-align:center
Padding:5px
}
Nav {
Line-height:30px
Background-color:#eeeeee
Height:300px
Width:100px
Float:left
Padding:5px
}
Section {
Width:350px
Float:left
Padding:10px
}
Footer {
Background-color:black
Color:white
Clear:both
Text-align:center
Padding:5px
}
The above is all the content of this article "sample Analysis of HTML layout". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
