html版面設計css排版html版面分割網頁排版範例div css切版教學CSS DIV 網頁排版css div排版html版面配置

CSS 排版教學– 2 欄式網頁版型排版

文章推薦指數： 80 %
投票人數：10人

CSS排版教學，用CSS 語法編排網頁版型， 在HTML 使用div 劃分欄位，再用CSS 語法來做圖形與版面編排，這個範例是CSS 網頁設計的基本練習. 【飛肯設計學苑】教學範例區飛肯課程介紹教學文章首頁教學文章分類Photoshop平面設計Photoshop後製修圖Dreamweaver網頁設計CSS排版–網頁設計JavaScript程式設計RWD網頁設計SEO優化-網站優化GoodDesign好站報Free免費資源好康報開課時間表影像設計課程網頁設計課程前端程式課程免費試聽課程飛肯教學»CSS教學-網頁排版»CSS排版教學–2欄式網頁版型排版<>CSS排版教學–2欄式網頁版型排版CSS排版教學，用CSS語法編排網頁版型，在HTML使用div劃分欄位，再用CSS語法來做圖形與版面編排，這個範例是CSS網頁設計的基本練習，給同學多多練習使用CSS語法編排網頁版型，在這個版型的四周還增加了陰影與倒影的圖形設計。

網頁HTML部份使用

畫分欄位，再用CSS語法來做圖形編排與版面定位，這個範例是CSS語法設計網頁的基本練習，與我們飛肯上課的時候的兩欄式CSS版型是差不多的，加以改良，製作出CSS版型的外邊框四面陰影效果~文章段落列表網頁版型設計圖規劃
位置開HTML網頁開CSS文件重點說明網頁完成網頁版型設計圖 規劃
位置開HTML網頁把
寫出來，如下：1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16  
   
 
 
  開CSS文件HTML版型配置相關的主要CSS語法部份，如下：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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64   @importurl("reset.css");   body{   background-color:ADADAD;   } #HEADER{   margin:0auto;   width:900px;   height:131px;   background-image:url(images/top.jpg);   } #WRAPPER{   margin:0auto;   width:880px;   padding:010px;   background-image:url(images/center.jpg);   overflow:hidden;/*當內部有
使用float的時候，父層的
高度會壞掉*/ /*使用overflow:hidden;是最簡單破解這個問題的方法*/ }   #SIDE{   width:170px;/*
要設定寬度，才能配合float做水平靠左或靠右排列*/   float:left;/*使用float讓這個
做水平靠左排列*/   }   #CONTENT{   width:auto;/*設定auto就會自動伸縮，這是
的預設值，所以可以省略不寫*/   margin-left:170px;/*上面的#SIDE
寬度是170px*/ /*這個#CONTENT設定左間距可以避免多出來的內容文字和上面的
重疊*/   }   #FOOTER{   clear:both;/*當上方的內容使用float時，下方的
會產生重疊上去的問題*/ /*寫clear:both;解除浮動就可以解決這個問題*/   margin:0auto;   width:900px;   height:121px;   background-image:url(images/down.jpg);   }@importurl("reset.css");body{background-color:ADADAD;} #HEADER{margin:0auto;width:900px;height:131px;background-image:url(images/top.jpg);} #WRAPPER{margin:0auto;width:880px;padding:010px;background-image:url(images/center.jpg);overflow:hidden;/*當內部有
使用float的時候，父層的
高度會壞掉*/ /*使用overflow:hidden;是最簡單破解這個問題的方法*/ }#SIDE{width:170px;/*
要設定寬度，才能配合float做水平靠左或靠右排列*/float:left;/*使用float讓這個
做水平靠左排列*/ }#CONTENT{width:auto;/*設定auto就會自動伸縮，這是
的預設值，所以可以省略不寫*/margin-left:170px;/*上面的#SIDE
寬度是170px*/ /*這個#CONTENT設定左間距可以避免多出來的內容文字和上面的
重疊*/}#FOOTER{clear:both;/*當上方的內容使用float時，下方的
會產生重疊上去的問題*/ /*寫clear:both;解除浮動就可以解決這個問題*/margin:0auto;width:900px;height:121px;background-image:url(images/down.jpg);}重點說明使用Float的時候父層#WRAPPER的高度會消失，使用overflow:hidden;即可破解這個問題。

#SIDE一定要先設定寬度之後才能使用float做水平排列，使用float做水平排列讓這個
靠左#CONTENT寬度設定auto就會自動伸縮，這是
的預設值，所以可以省略不寫這個
就會因為上面的float影響，浮上去水平排列在一起上面的#SIDE寬度是170px，這個#CONTENT設定左間距可以避免多出來的內容文字和上面的
重疊#FOOTER當上方的內容使用float時，下方的
會產生重疊上去的問題，寫clear:both;解除浮動就可以解決這個問題。

把主要的網頁版型外觀的
和CSS語法寫完後，工作就算是初步完成了~接下來就只要把頁面所需要的文章內容和插圖置入即可~我們先放入一些簡單的文字內容試看看~如下：網頁完成CSS真的很方便吧~同學要多多練習，熟練之後，就可以自己創作更多不同的網頁版型嘍。

  當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！ 關於「姜智豪老師」於1996年開始從事網頁設計工作20多年，參與設計過許多網站專案的開發，一直熱衷網頁設計工作至今。

從1998年開始從事教學工作，對於網頁設計教學有相當高的熱忱，於2006年創立飛肯設計學苑。

主要專長Photoashop、HTML、CSS、RWD、JavaScript、jQuery等網頁技術，對於SEO優化搜尋引擎排名提昇，以及InstructionalDesign教學專案設計亦有深入的研究。

相似的文章好站分享flashmo.com有270個以上ActionScrpt範例下載ActionScript教學-載入外部圖片-Tweener縮放開合特效CSS語法教學-製作下拉式選單-簡易版【靈感來源】COLORION-尋找配色靈感的好幫手熱門的文章CSS3教學Transition轉場動畫–滑動選單篇免費「條碼字型」下載用Flash製作Android應用程式–AdobeAIRforAndroid教學：SublimeText的安裝設定及入門操作–[上篇]【設計資源】「ImageEffects」:可線上套用CSS濾鏡特效好站postedinCSS教學-網頁排版andtaggedcss,css排版,css教學,div,HTML,範例下載,網頁版型,網頁設計.<>留言功能已關閉。

Top【飛肯設計學苑】教學範例區本站採用WordPress建置

請為這篇文章評分？

延伸文章資訊