大家好！這次飛肯的教學文，要來分享的是，如何利用 CSS-div 語法排版，將背景圖片固定在自己想要的網頁位置上，雖然是個很簡單的範例，不過各種常用的 background 語法設定幾乎都可以從這次範例中一起學到喔。
此外，版型中還附加了兩個 CSS3 的特殊效果語法，來讓大家認識一下：分別是圓角效果，以及文字的陰影效果，現在就請大家跟著以下步驟，一起完成今天的 CSS 語法練習吧！
【步驟一】HTML 網頁架構
按照慣例，我們先從 HTML 網頁架構開始著手，請大家先參考底下圖示，建立一個新的檔案 :
比較需要注意的是， body 內設有兩個 id 選擇器(分別命名為 “BOX” 以及 “CONTENT” )，主架構則很簡單，只有 h1 標題以及 p 段落標籤。
【步驟二】附加 CSS 外部樣式表
再來，開啟一個新的 CSS 外部樣式表，並附加在 HTML 中；如下圖，樣式表檔名為「 layout.css 」。
在「 layout.css 」樣式表中，第一行請各位一樣利用匯入「 reset.css 」這個檔案來做重置歸零的動作，如果有新同學不清楚的話，歡迎參考飛肯之前的這一篇教學專文，裏頭有詳細的說明： 《Reset CSS – 重置歸零 – 網頁排版在各瀏覽器快速一致化》。
更不要忘記將「 reset.css 」這個檔案下載之後，與我們正在編寫的「 layout.css 」放在同一個資料夾喔。
【步驟三】CSS 排版 – body
從這個步驟開始，咱們來正式編寫 CSS 語法吧~關於本篇分享文最重要的背景圖片之設定，都是寫在 body 裡面！
要請大家先準備一張用來當作固定背景圖片的小圖示，在範例中，小編選用了一個 256 px * 256 px 的 PNG 圖檔，並希望圖片可以單獨且固定在網頁的右下方，
CSS 語法的部分，就請大家直接依照下方圖示說明:
完成之後，網頁如下 :
【步驟四】CSS 排版 – BOX
在 BOX 區包含了 h1 標題以及 p 文字段落，為網頁的主要畫面，我們在這裡要設定的有寬度與文字字體，又，因為已經設好寬度，所以只要將 margin-left 跟 margin-right 都設 auto，畫面即可置中。
完成之後，網頁如下 :
【步驟五】CSS 排版 – CONTENT
在 CONTENT 區，我們利用 padding 以及背景色的設定，可讓 h1 標題跟 p 段落之間，視覺上面有明顯區隔；
最後一行就是要分享給大家的 CSS3 特效之一 : 圓角效果，如果想要角度大一點的話，只要將像素數字再加大就可以了。
完成之後，網頁如下 :
【步驟六】CSS 排版 – h1 標題
在 h1 標題的語法部分，幾乎都是常用的文字設定，關於文字設定的專文，歡迎大家參考底下這一篇喔~
《CSS 教學 – 基本文字設定 : font-size 與 line-height》
比較需要說明的只有「 text-transform : uppercase 」，這句語法可以讓英文字母設為全部大寫。相反的，假如希望英文字母變小寫的話，將 “uppercase” 改為 “lowercase” 就可以囉！
完成之後，網頁如下 :
在這段語法的最後，請大家再加註一行，這也是今天要分享給大家的第二個 CSS3 特效 : 文字的陰影效果( text-shadow )。
陰影的範圍及程度，大家可以參照圖示中的數值，或是自己也可以 try 看看不同的設定，完成之後，就可以看見 h1 標題呈現出明顯的立體感囉。
由於 h1 同時包含 FLYCAN 跟課程名稱，一眼看去辨識度不高，所以請大家回到一開始 HTML 架構中，這邊小編有嵌入了一個 b 標籤 : 也就是字體加粗；
接下來，為了想要讓課程名稱更跳色醒目一點，我們可以直接指定 b 標籤的顏色：
這樣子，就可以完成 h1 標題的整體美化作業了。
【步驟七】CSS 排版 – p 文字段落
p 段落的語法很簡單，就是基本的文字設定，大家請直接參考下圖：
完成之後，我們來檢視一下整個網頁吧~
唉唷~看起來不錯唷！(給自己拍拍手)
……可是，大家先不要走開！
教學文還沒結束喔！
【附錄一】background 語法的縮寫方式
現在，請大家回顧一下步驟三，光是 background 的設定就用掉了5行，是不是可以簡化一點呢？
嘿嘿嘿…….當然是沒問題，這邊就教各位如何簡化的進階寫法。
我們可以將所有與 background 相關的設定，全部縮寫在同一行語法中，縮寫之屬性先後順序並無嚴格規定，但大家可以記熟一種固定的順序以免遺漏喔。
【附錄二】當文字內容增加時…如何保持版型的完整性？
在本篇一開始的 HTML 架構中，因為小編只有放入一小段文字內容在 p 段落中，所以最後整個網頁可以完整呈現在畫面中 :
假如，我們需要增加內容文字時，那會導致甚麼情形呢？…
哎呀！雖然咖啡跟筆記還是完美的固定在畫面右下角，可是，p 段落與網頁最下緣完全緊貼在一起了… 囧
為了避免出現這種窘況，小編提醒一下大家，請同樣回到步驟三: body 的語法排版中，只要再加註一行 :
打好之後，來看看結果發生甚麼變化吧~
唷呼~這樣子，就算得上是一個專業又完美的 Ending 啦！
這次的 CSS 語法教學就做到這邊結束，謝謝各位同學有耐心地跟著飛肯小編一起練習，希望大家都能夠有所收穫喔！
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！