CSS 語法 – float 浮動排列 – 表格做不到的功能

「float: left;」浮動排列~ 是 CSS 排版時很常用到的語法之一,這也是表格做不到的功能之一…..

尤其是對於學習過 PHP 或 ASP 資料庫的同學來說,想要做出電子相本或購物網站的頁面編排時,常常很煩惱如何做到「巢狀重覆排列」的效果,要寫一大堆程式才做得到,若改用 CSS 語法的話,只要短短一句「float: left;」就解決啦~ 是不是很神奇呢!

CSS 語法 - 網頁設計  - CSS 語法 - float 浮動排列 - 表格做不到的功能 - flycan_06_131

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

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

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


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

CSS 語法 - 網頁設計  - CSS 語法 - float 浮動排列 - 表格做不到的功能 - flycan_01_379


使用 CSS 樣式定義 div 標籤的外觀:

height: 120px;     /* 高度 120 */
width: 120px;     /* 寬度 120
*/
background-color: #6699FF;      /* 背景色 藍色*/
border: 2px dashed #003366;      /* 虛線邊框 2 像素 深藍色
*/
margin: 20px;      /* 四周邊界 20 像素
*/

CSS 語法 - 網頁設計  - CSS 語法 - float 浮動排列 - 表格做不到的功能 - flycan_02_628


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

CSS 語法 - 網頁設計  - CSS 語法 - float 浮動排列 - 表格做不到的功能 - flycan_03_798


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

CSS 語法 - 網頁設計  - CSS 語法 - float 浮動排列 - 表格做不到的功能 - flycan_04_158


在瀏覽器呈現的結果如下:

CSS 語法 - 網頁設計  - CSS 語法 - float 浮動排列 - 表格做不到的功能 - flycan_05_137


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

CSS 語法 - 網頁設計  - CSS 語法 - float 浮動排列 - 表格做不到的功能 - flycan_06_131

by
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , .

迴響已被關閉。