問題討論區


【CSS 語法】文章精華區


【問題】 關於四欄式版型



關於四欄式版型
會員二級
註冊日期:
2009/7/14 0:39
留言: 7
最近在不斷練習CSS版型,當3欄式練習完後,可知道左邊可用float:left,右邊可用float:right來做,中間用margin-left與margin-right來做,那四欄的做法又是該如何做呢?我有看了別人的範例,他們是在每一欄中寫入各自width的值與各自的float:left (我沒看到float:right)。

不知老師可否提供簡單的四欄範例呢?因為還是習慣老師的寫法。
非常感謝∼

2010/9/13 17:24
 


回覆: 關於四欄式版型
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169

 

4 欄式的網頁版型的確只要使用 float:left 就可以完成了~

中間的 4 個 <div> 在使用 float:left 的時候,就會依序的直接靠在前面一個 <div> 的旁邊~

就跟上課的時候教過的【範例 14_003】 float 浮動式排列的 BOX 的方法是一模一樣的~

一個接著一個的並排在一起,就會形成 4 欄式並排的網頁版型~

請參考以下範例:

 

初步規劃 7 個 <div> 位置圖,如下:

 

新開一頁 HTML 網頁,把 <div> 寫出來,如下:

 

新開一頁 CSS 文件,版型配置相關的主要 CSS 語法部份,如下:

 

範例下載【4 欄式 CSS 網頁版型

 

 

 


2010/9/15 2:40
 


回覆: 回覆: 關於四欄式版型
會員二級
註冊日期:
2009/7/14 0:39
留言: 7
謝謝老師詳細的說明∼感恩!

2010/9/16 16:31
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS