CSS 排版教學– 單欄式網頁版型設計【飛肯設計學苑】教學範例區 | css header教學
![CSS 排版教學– 單欄式網頁版型設計【飛肯設計學苑】教學範例區](https://i.imgur.com/axBPWDg.jpg)
再過兩天,就是清明/兒童節連假的到來,大家除了可以安排慎終追遠、放鬆玩樂的活動之外,或者是……也可以選擇利用假期,跟著飛肯教學文,一起來練功囉!_這次要跟大家分享,如何用CSS語法來做一個單欄式網頁的版型設計!雖然只是一個很基本的架構,但是在教學文當中,大家可以跟著小編一起學習幾個常用的語法,例如「text-indent」的兩種使用方式、選單之水平排列、清除浮動的寫法….等等。如果之前已經有學過的同學,也可以當作是複習,多練習幾次之後就可以熟能生巧!以下就開始我們這次的範例練習吧!★飛肯的CSS教學課程教學課程:CS...
![CSS 排版教學– 單欄式網頁版型設計【飛肯設計學苑】教學範例區](http://pix1.agoda.net/hotelimages/5059957/-1/5f63dc982bc37c5981773e411168efa4.jpg?s=800x)
再過兩天,就是清明/兒童節連假的到來,大家除了可以安排慎終追遠、放鬆玩樂的活動之外,或者是……也可以選擇利用假期,跟著飛肯教學文,一起來練功囉! _
這次要跟大家分享,如何用 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 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
CSS DIV 三欄式網頁排版設計 | css header教學
CSS DIV 單欄式網頁排版 | css header教學
CSS 基本 | css header教學
CSS 排版不得不知的祕訣(範例一) | css header教學
CSS 排版教學 | css header教學
CSS 排版教學 | css header教學
CSS 排版教學– 三欄式網頁設計教學範例【飛肯設計學苑】 | css header教學
CSS 排版教學– 單欄式網頁版型設計 | css header教學
CSS 排版教學– 單欄式網頁版型設計【飛肯設計學苑】教學範例區 | css header教學
Day5 來切一個一定會有的header 吧 | css header教學
Day5 來切一個一定會有的header 吧 | css header教學
HTML <header> 標頭標題區塊 | css header教學
HTML <header> 標頭標題區塊 | css header教學
HTML 5 快速導覽 | css header教學
HTML 5 快速導覽 | css header教學
【Wordpress | css header教學
【講義02】headernavLOGO設計與導覽列設定maintable | css header教學
今天我們用CSS 來排版吧- iT 邦幫忙 | css header教學
使用CSS串接樣式表改變網頁版面設計 | css header教學
網頁設計教學 | css header教學
網頁設計教學 | css header教學
輕鬆上手css(I) | css header教學
輕鬆上手css(I) | css header教學
頁首區塊<header> | css header教學
![](https://i.imgur.com/axBPWDg.jpg)