CSS 排版教學– 4 欄式網頁版型– 範例下載
文章推薦指數： 80 %
使用
和CSS 語法設計4 欄式的網頁版型. 4 欄式的網頁版型的確只要使用float:left 就可以完成了~. 中間的4 個
在使用float:left 的時候，就會依序的直接靠在 ...
【飛肯設計學苑】教學範例區飛肯課程介紹教學文章首頁教學文章分類Photoshop平面設計Photoshop後製修圖Dreamweaver網頁設計CSS排版–網頁設計JavaScript程式設計RWD網頁設計SEO優化-網站優化GoodDesign好站報Free免費資源好康報開課時間表影像設計課程網頁設計課程前端程式課程免費試聽課程飛肯教學»CSS教學-網頁排版»CSS排版教學–4欄式網頁版型–範例下載<>CSS排版教學–4欄式網頁版型–範例下載使用
和CSS語法設計4欄式的網頁版型4欄式的網頁版型的確只要使用float:left就可以完成了~中間的4個
在使用float:left的時候，就會依序的直接靠在前面一個
的旁邊~就跟上課的時候教過的【範例14_003】float浮動式排列的BOX的方法是一模一樣的~一個接著一個的並排在一起，就會形成4欄式並排的網頁版型~請參考以下範例：在HTML網頁上初步規劃7個
位置圖，如下：HTML語法部份，先寫好
結構，如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
使用Float的時候#WRAPPER的高度會消失*/
/*使用overflow:hidden;即可破解這個問題*/
background-color:#999999;padding-top:20px;padding-bottom:20px;
}
#BOX_A{
width:170px;/*
一定要先設定寬度之後才能使用float做水平排列*/
float:left;/*使用float做水平排列*/
background-color:#FFFFCC;
margin-left:12px;/*設定欄位的左邊外間距*/
}
#BOX_B{
width:170px;/*
一定要先設定寬度之後才能使用float做水平排列*/
float:left;/*使用float做水平排列*/
background-color:#FFFF66;
margin-left:12px;/*設定欄位的左邊外間距*/
}
#BOX_C{
width:170px;/*
一定要先設定寬度之後才能使用float做水平排列*/
float:left;/*使用float做水平排列*/
background-color:#FFFFCC;
margin-left:12px;/*設定欄位的左邊外間距*/
}
#BOX_D{
width:170px;/*
一定要先設定寬度之後才能使用float做水平排列*/
float:left;/*使用float做水平排列*/
background-color:#FFFFCC;
margin-left:12px;/*設定欄位的左邊外間距*/
}
#FOOTER{
clear:both;/*當上方的內容使用float時，下方的
會重疊上去的問題*/
/*寫clear:both;解除浮動就可以解決這個問題*/
margin:0auto;
width:900px;
height:200px;
background-color:#336699;
}#HEADER{margin:0auto;width:900px;height:200px;background-color:#336699;}
#WRAPPER{margin:0auto;width:900px;overflow:hidden;/*當內容的
使用Float的時候#WRAPPER的高度會消失*/
/*使用overflow:hidden;即可破解這個問題*/background-color:#999999;padding-top:20px;padding-bottom:20px;
}
#BOX_A{width:170px;/*
一定要先設定寬度之後才能使用float做水平排列*/float:left;/*使用float做水平排列*/background-color:#FFFFCC;margin-left:12px;/*設定欄位的左邊外間距*/
}
#BOX_B{width:170px;/*
一定要先設定寬度之後才能使用float做水平排列*/float:left;/*使用float做水平排列*/background-color:#FFFF66;
margin-left:12px;/*設定欄位的左邊外間距*/
}
#BOX_C{width:170px;/*
一定要先設定寬度之後才能使用float做水平排列*/
float:left;/*使用float做水平排列*/background-color:#FFFFCC;margin-left:12px;/*設定欄位的左邊外間距*/
}#BOX_D{width:170px;/*
一定要先設定寬度之後才能使用float做水平排列*/
float:left;/*使用float做水平排列*/background-color:#FFFFCC;margin-left:12px;/*設定欄位的左邊外間距*/
}
#FOOTER{clear:both;/*當上方的內容使用float時，下方的
會重疊上去的問題*/
/*寫clear:both;解除浮動就可以解決這個問題*/margin:0auto;width:900px;height:200px;background-color:#336699;}範例下載【4欄式CSS網頁排版版型】 當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！ 關於「姜智豪老師」於1996年開始從事網頁設計工作20多年，參與設計過許多網站專案的開發，一直熱衷網頁設計工作至今。
從1998年開始從事教學工作，對於網頁設計教學有相當高的熱忱，於2006年創立飛肯設計學苑。
主要專長Photoashop、HTML、CSS、RWD、JavaScript、jQuery等網頁技術，對於SEO優化搜尋引擎排名提昇，以及InstructionalDesign教學專案設計亦有深入的研究。
相似的文章CSS教學-文字大小、間距、行距、背景圖CSS排版教學–div圖文框排版入門CSS教學-CSSSprite網頁優化技巧入門【設計資源】-GoogleFonts免費雲端字庫-導覽篇熱門的文章Photoshop偏好設定–取消「以標籤式開啟新文件」筆刷–【設計資源】多款Photoshop藝術風筆刷下載CSShack概論–什麼是CSShack？好站分享flashmo.com有270個以上ActionScrpt範例下載【Illustrator教學】3D效果-彎曲造型文字postedinCSS教學-網頁排版andtaggedcss,css排版,css教學,div,float,範例下載.<>留言功能已關閉。
Top【飛肯設計學苑】教學範例區本站採用WordPress建置
從1998年開始從事教學工作，對於網頁設計教學有相當高的熱忱，於2006年創立飛肯設計學苑。
主要專長Photoashop、HTML、CSS、RWD、JavaScript、jQuery等網頁技術，對於SEO優化搜尋引擎排名提昇，以及InstructionalDesign教學專案設計亦有深入的研究。
相似的文章CSS教學-文字大小、間距、行距、背景圖CSS排版教學–div圖文框排版入門CSS教學-CSSSprite網頁優化技巧入門【設計資源】-GoogleFonts免費雲端字庫-導覽篇熱門的文章Photoshop偏好設定–取消「以標籤式開啟新文件」筆刷–【設計資源】多款Photoshop藝術風筆刷下載CSShack概論–什麼是CSShack？好站分享flashmo.com有270個以上ActionScrpt範例下載【Illustrator教學】3D效果-彎曲造型文字postedinCSS教學-網頁排版andtaggedcss,css排版,css教學,div,float,範例下載.<>留言功能已關閉。
Top【飛肯設計學苑】教學範例區本站採用WordPress建置
延伸文章資訊
- 1CSS 排版教學– 4 欄式網頁版型– 範例下載
使用<div> 和CSS 語法設計4 欄式的網頁版型. 4 欄式的網頁版型的確只要使用float:left 就可以完成了~. 中間的4 個<div> 在使用float:left 的時候，就會依序...
- 2精修DIV+CSS網頁排版設計輕鬆做 - 恆逸教育訓練中心
優勢多媒體前端互動設計 - DCSS. 精修DIV+CSS網頁排版設計輕鬆做. Web Design with DIV and CSS. 時數：24小時; 費用：NT$ 8,400; 點數：2....
- 3CSS DIV 三欄式網頁排版設計 - Wibibi
CSS DIV 三欄式網頁排版設計 · float - DIV 區塊浮動 · width - DIV 寬度 · height - DIV 高度 · margin - DIV 區塊的外距 · fo...
- 4CSS 排版教學– 2 欄式網頁版型排版
CSS排版教學，用CSS 語法編排網頁版型， 在HTML 使用div 劃分欄位，再用CSS 語法來做圖形與版面編排，這個範例是CSS 網頁設計的基本練習.
- 5用DIV 排版三欄式網頁設計- CSS 學習筆記 - Branbibi
用DIV 排版三欄式網頁設計手法與兩欄式網頁設計有點類似，差別在於三欄式網頁架構多了一個邊欄（sidebar），同樣可以使用CSS 的float 浮動技巧來設計 ...
