自學網頁の嬰兒教材:第3課 ── 網頁排版

第3課 課程目標

學會使用div和span元素

能夠做出漂亮的排版

第3課 課程內容

用jsfiddle來練習:

https://jsfiddle.net

這次要寫HTML跟CSS兩個區塊

請閱讀這份教材:

HTML Block and Inline Elements

或是看中文版

HTML 块

接著開始學習版面配置:

學習 CSS 版面配置

把教學裡面的HTML、CSS程式碼,貼到 jsfiddle 裡面做練習,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果了。

讀完、練習完這份教學裡面的程式碼,就算是學會基本的網頁排版了。

第3課 作業

在第1、2課的作業,我們將端傳媒的文章內容做了出來,但是略過了上方的導覽列、旁邊的編輯推薦、熱門頭條等等區塊。

這次作業要延續那些作業,這次不只是文章內容,請將整個頁面都做出來。

注意:本週作業內容繁重許多,請至少將上方的導覽列、旁邊的編輯推薦區塊做出來,其餘的可以省略。

完成這些,你就完成這次的課程目標了!

注意:

有同學反應,jsfiddle的介面太窄,不方便排版

如果您也覺得jsfiddle不好用,可改用 Thimble 來練習。

完成後請將您的Thimble專案發布,即可將網址分享出去。

小技巧:

您可以使用瀏覽器的開發者功能,觀察網站本身是怎麼寫的

例如:Google Chrome 請對著元素按右鍵 -> 檢查

多利用這個技巧觀察網站原始碼,對於學習本身很有幫助

您好,本站內容已停止更新

我寫了一個新的平台網站,未來的新內容都會發佈在這裡:

https://devs.tw/series

請前往新網站,瀏覽更多的新內容。