CSS 排版教學– 單欄式網頁版型設計【飛肯設計學苑】教學範例區 | css樣式分享
再過兩天,就是清明/兒童節連假的到來,大家除了可以安排慎終追遠、放鬆玩樂的活動之外,或者是……也可以選擇利用假期,跟著飛肯教學文,一起來練功囉!_這次要跟大家分享,如何用CSS語法來做一個單欄式網頁的版型設計!雖然只是一個很基本的架構,但是在教學文當中,大家可以跟著小編一起學習幾個常用的語法,例如「text-indent」的兩種使用方式、選單之水平排列、清除浮動的寫法….等等。如果之前已經有學過的同學,也可以當作是複習,多練習幾次之後就可以熟能生巧!以下就開始我們這次的範例練習吧!★飛肯的CSS教學課程教學課程:CS...
再過兩天,就是清明/兒童節連假的到來,大家除了可以安排慎終追遠、放鬆玩樂的活動之外,或者是……也可以選擇利用假期,跟著飛肯教學文,一起來練功囉! _
這次要跟大家分享,如何用 CSS 語法來做一個單欄式網頁的版型設計!雖然只是一個很基本的架構,但是在教學文當中,大家可以跟著小編一起學習幾個常用的語法,例如「 text-indent 」 的兩種使用方式、選單之水平排列、清除浮動的寫法….等等。如果之前已經有學過的同學,也可以當作是複習,多練習幾次之後就可以熟能生巧!以下就開始我們這次的範例練習吧!
★ 飛肯的CSS教學課程 教學課程:CSS 語法 div 版面設計專修班[1] 有興趣的同學可以報名唷!
【步驟一】HTML 網頁架構首先,當然是從 HTML 網頁架構開始,請大家直接參考下方的圖示,建立一個新的網頁檔案。
body 裡面的主結構,這邊已幫大家用紅色框線標示出來,一共可分成四個區塊。
接著,我們將四個區塊由上而下,依序設定 id 選取器並命名為 : 「HEADER」、「NAV」、「CONTENT」、「FOOTER」。
完成之後,瀏覽網頁應該會如下方圖示 :
【步驟二】連結外部 CSS 樣式表再來,就要請各位新建一個 CSS 樣式表 (在本文範例中,所使用的檔案名稱為: layout.css),並將此檔案附加在前一個步驟中完成的 HTML 裡。
開啟 layout.css 檔案後,請大家先參照下方圖示,非常建議可以多加利用註解的方式 (也就是圖示中,呈現灰色的文字),將不同的區塊先標示出來,這樣子不僅看起來井然有序,日後也會方便自己修改或更新喔!
【步驟三】 CSS 排版 – body首先,在準備開始 CSS 編寫時,請記得在第一行先匯入 reset.css 這個檔案來做重置歸零的動作,如果有不清楚的同學,歡迎參考飛肯之前的這一篇教學專文,裏頭有非常詳盡的說明: 《Reset CSS – 重置歸零 – 網頁排版在各瀏覽器快速一致化》[2]
另外,也不要忘記將 reset.css 檔案下載之...
取得本站獨家住宿推薦 15%OFF 訂房優惠
[新版CSS樣式分享]一個清爽桃紅色系版本[三欄式]
那一張大一點的圖片給大家看一下↓因為我沒有套到我的部落格裡面當Demo,有太多分享出來的CSS樣式,一直覆蓋或是開新的也不是很好,所以還是截圖給大家看 ...