HTML基礎教程：div元素實現布局

用 <div> 元素的 HTML 布局

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

這個例子使用了四個 <div> 元素來創建多列布局：

<html>
<head>
<style>
#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;	 	 
}
</style>
</head>
<body>
<div id="header">
<h1>天華信息教育</h1>
</div>
<div id="nav" >
第一組<br>
第二組<br>
第三組<br>
</div>
<div id="section">
<h2>這是標題</h2>
<p>
這是內容
</p>
<p>
這是內容
</p>
</div>
<div id="footer">
天華信息教育
</div>
</body>
</html>

HTML基礎教程：div元素實現布局

一點都不會程序也不懂程序，也從來沒有接觸過程序語言，能不能做前端網頁布局，答案是肯定的，CSS層疊樣式是一塊不同于程序且與程序相似的一種語言。說它與程序相似因為它也像程序代碼一樣需要寫且是英文一般的代碼等特性。說它不同于程序是因為CSS代碼不像程序需要通過服務器解釋與處理，而是直接由瀏覽器解釋而直接呈現給瀏覽用戶。CSS是比較有規律非常簡單且容易掌握的一種語言。您只需要記住掌握這些規律那就恭喜您已經會CSS。CSS有什么規律？第一就是有屬于他自己的名稱，也叫選擇器，第二就是要有他的屬性類似這種格式{key：value}。第三要把css名稱放到html代碼中，要想學會html就是多看別人的網頁源代碼總結經驗，了解html基礎可以多看看html相關教程，尤其是新手，一定要自己動手制作DIV與CSS頁面，遇到問題要多問（問答）及多查看資料，多做筆記。進步成為高手的關鍵是自己動手多制作頁面。在網頁html中查看源代碼會看到很多代碼，包括html標簽、css的標簽等。

附?div與css布局代碼：

用瀏覽器打開效果圖：

頁布局對改善網站的外觀非常重要。

請慎重設計您的網頁布局。

在線實例

使用 <div> 元素的網頁布局

如何使用 <div> 元素添加布局。

使用 <table> 元素的網頁布局

如何使用 <table> 元素添加布局。

網站布局

大多數網站會把內容安排到多個列中（就像雜志或報紙那樣）。

大多數網站可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。

	雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具。

HTML 布局 - 使用<div> 元素

div 元素是用于分組 HTML 元素的塊級元素。

下面的例子使用五個 div 元素來創建多列布局：

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網頁標題</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權 ? runoob.com</div></div></body></html>

上面的 HTML 代碼會產生如下結果：

HTML 布局 - 使用表格

使用 HTML <table> 標簽是創建布局的一種簡單的方式。

大多數站點可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。

	即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！

下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列：

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網頁標題</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">內容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權 ? runoob.com</td></tr></table></body></html>

上面的 HTML 代碼會產生以下結果：

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護。通過編輯單一的文件，就可以改變所有頁面的布局。如需學習更多有關 CSS 的知識，請訪問我們的CSS 教程。

Tip: 由于創建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，并優化它們）。

HTML 布局標簽

標簽	描述
<div>	定義文檔區塊，塊級(block-level)
<span>	定義 span，用來組合文檔中的行內元素。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：html開發筆記03- 標題標簽
下一篇：用Node.js進行后端開發的特點與優勢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML基礎教程：div元素實現布局

用 <div> 元素的 HTML 布局

您的項目需求