CSS 排版教學 – float 浮動排列 – 表格做不到的功能

CSS 排版教學「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
姜智豪
老師

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

關於「姜智豪 老師」

於 1996 年開始從事網頁設計工作 20 多年,參與設計過許多網站專案的開發,一直熱衷網頁設計工作至今。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 Photoashop、 HTML、CSS、RWD、JavaScript、jQuery 等網頁技術,對於 SEO 優化搜尋引擎排名提昇,以及 Instructional Design 教學專案設計亦有深入的研究。
posted in CSS 教學 - 網頁排版 and tagged , , , .

留言功能已關閉。