CSS 排版教學「float: left;」浮動排列~ 是 CSS 排版時很常用到的語法之一,這也是表格做不到的功能之一…..
尤其是對於學習過 PHP 或 ASP 資料庫的同學來說,想要做出電子相本或購物網站的頁面編排時,常常很煩惱如何做到「巢狀重覆排列」的效果,要寫一大堆程式才做得到,若改用 CSS 語法的話,只要短短一句「float: left;」就解決啦~ 是不是很神奇呢!
CSS 語法中的 div 標籤本來是「區塊」的功能,後來 dreamweaver 在編排文字時卻常常拿來當作「段落」的功能在使用,取代了原本 html 中的 p 標籤~ 若您只會將 div 標籤用在「段落」的功能就真是太委曲它了~
div 標籤是 CSS 語法用來取代 table 表格很重要的工具,在標準的 CSS 排版中都是用 div 標籤來劃分網頁內容,無論是相對定位還是絕對定位,使用起來相當方便,在網頁的大小和讀取速度上比 table 快上許多,更重要的是在版面的調整和修改時,只要調整一兩個參數,整個網站的網頁即可煥然一新,傳統的 table 只能全部重排,耗時又耗工,因此 div 標籤可以大大的減少網頁開發的成本支出。
以下就用一個小範例來講解 div 標籤功能:
先在<body>之內寫入一些 div 標籤~
使用 CSS 樣式定義 div 標籤的外觀:
height: 120px; /* 高度 120 /
width: 120px; / 寬度 120/
background-color: #6699FF; / 背景色 藍色/
border: 2px dashed #003366; / 虛線邊框 2 像素 深藍色/
margin: 20px; / 四周邊界 20 像素 */
目前在瀏覽器呈現的結果如下:
再加上一個語法「float: left;」浮動排列~
在瀏覽器呈現的結果如下:
調整瀏覽器大小時,div區塊也會自動調整排位置~
by
姜智豪
老師
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!