本文主要介紹HTML的布局方式。歸納了以下，主要有以下三種方式：

使用

元素的 HTML 布局

注釋：

元素常用作布局工具，因為能夠輕松地通過 CSS 對其進行定位。

這個例子使用了四個

元素來創(chuàng)建多列布局：

示例：

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 www.webym.net

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;

}

使用 HTML5 的網(wǎng)站布局

HTML5 提供的新語義元素定義了網(wǎng)頁的不同部分：

HTML5 語義元素

header

定義文檔或節(jié)的頁眉

nav

定義導航鏈接的容器

section

定義文檔中的節(jié)

article

定義獨立的自包含文章

aside

定義內(nèi)容之外的內(nèi)容(比如側(cè)欄)

footer

定義文檔或節(jié)的頁腳

details

定義額外的細節(jié)

summary

定義 details 元素的標題

這個例子使用 , , , 以及 來創(chuàng)建多列布局：

示例：

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 www.webym.net

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;

}

使用表格的 HTML 布局

注釋：

使用

示例：

The table element was not designed to be a layout tool.

CSS代碼：

table.lamp {

width:100%;

border:1px solid #d4d4d4;

}

table.lamp th, td {

padding:10px;

}

table.lamp td {

width:40px;

}

聲明:如需轉(zhuǎn)載，請注明來源于www.webym.net并保留原文鏈接：http://www.webym.net/jiaocheng/383.html

總結(jié)

以上是生活随笔為你收集整理的html布局方式有哪些,HTML几种布局方式-HTML教程第十六讲的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。