【CSS 語法教學】範例區
【CSS語法教學】浮動區塊：表格做不到的功能之一

【姜】 · 【老師】 註冊時間: 2005-12-01 文章: 1873

【CSS 語法】浮動區塊：表格做不到的功能之一

CSS 語法中的 div 標籤本來是「區塊」的功能，後來 dreamweaver 在編排文字時卻常常拿來當作「段落」的功能在使用，取代了原本 html 中的 p 標籤~ 若您只會將 div 標籤用在「段落」的功能就真是太委曲它了~

div 標籤是 CSS 語法用來取代 table 表格很重要的工具，在標準的 CSS 排版中都是用 div 標籤來劃分網頁內容，無論是相對定位還是絕對定位，使用起來相當方便，在網頁的大小和讀取速度上比 table 快上許多，更重要的是在版面的調整和修改時，只要調整一兩個參數，整個網站的網頁即可煥然一新，傳統的 table 只能全部重排，耗時又耗工，因此 div 標籤可以大大的減少網頁開發的成本支出。

以下就用一個小範例來講解 div 標籤功能：

更多 CSS div 教學 - 請看→ http://www.flycan.com/article/category/css

先在<body>之內寫入一些 div 標籤~

使用 CSS 樣式定義 div 標籤的外觀：
height: 120px;//高度 120
width: 120px; //寬度 120
background-color: #6699FF; //背景色藍色
border: 2px dashed #003366; //虛線邊框 2 像素深藍色
margin: 20px; //四周邊界 20 像素

目前在 IE 瀏覽器呈現的結果如下：

再加上一個語法「float: left;」浮動排列~

在 IE 瀏覽器呈現的結果如下：

調整 IE 瀏覽器大小時，div區塊也會自動調整排位置~

【姜】在 2011-02-23 23:42 作了第 5 次修改