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

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!

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.