Devs.tw 是讓工程師寫筆記、網誌的平台。歡迎您隨手紀錄、寫作，方便日後搜尋！
Devs.tw 是讓工程師寫筆記、網誌的平台。歡迎您隨手紀錄、寫作，方便日後搜尋！
學會使用div和span元素
能夠做出漂亮的排版
用jsfiddle來練習：
這次要寫HTML跟CSS兩個區塊
請閱讀這份教材：
HTML Block and Inline Elements
或是看中文版
接著開始學習版面配置：
把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。
讀完、練習完這份教學裡面的程式碼，就算是學會基本的網頁排版了。
在第1、2課的作業，我們將風傳媒的文章內容做了出來，但是略過了上方的導覽列、旁邊的熱門文章等等區塊。
這次作業要延續那些作業，這次不只是文章內容，請將整個頁面都做出來。
注意：本週作業內容繁重許多，請至少將上方的導覽列、旁邊的熱門文章推薦區塊做出來，其餘的可以省略。
完成這些，你就完成這次的課程目標了！
注意：
有同學反應，jsfiddle的介面太窄，不方便排版
如果您也覺得jsfiddle不好用，可改用 Thimble 來練習。
完成後請將您的 Thimble 專案發布，即可將網址分享出去。
小技巧：
您可以使用瀏覽器的開發者功能，觀察網站本身是怎麼寫的
例如：Google Chrome 請對著元素按右鍵 -> 檢查
多利用這個技巧觀察網站原始碼，對於學習本身很有幫助
哈囉 我看到你的作業囉
其實有過關囉！頁面大格局的切板，基本原理就是這樣 你都做到了
醜的話沒關係，內容跟細節可以再慢慢補 但是大原理你都懂囉
目標順利完成，期待看到你之後的其他作業！加油摟～
老師您好～～～
CSS 版面配置的教學 大概第十頁之後就看不太懂了
緩慢研究中Q.Q
https://jsfiddle.net/14hpcfaj/6/
目前做了大概長這樣 請您過目 OAO
這部分花了一些時間在琢磨，但還是不太明白 flex 跟 inline-block 在使用時機上的差別。另外 @media 的部份也還沒做出來QQ，目前做了這樣：https://thimbleprojects.org/feifeitzu/636971/ 繼續努力研究中(;3」ㄥ)
你好，我看到你寫的「以為只是太累，結果竟是腦中風差點送命！醫師嚴正提醒：出現這3症狀，速速送醫還有救！」
還原度非常高，寫得非常好，有95分，接近滿分
本課目標順利達成！
另外，關於你提到的問題，跟你分享兩篇文章
繼續加油！期待看到你下一次的作業！
Hello~版主，我完成第三階段作業了，再請你幫我看看作業~謝謝 ^_^
第三階段作業: https://thimbleprojects.org/hannahtest190705/699034
參考文章: https://crossing.cw.com.tw/blogTopic.action?id=742&nid=11862
老師好，我完成第三階段的作業了，再請您幫我看看，謝謝： 作業：https://glitch.com/~legendary-vulture 參考文章：https://www.storm.mg/lifestyle/1405103?srcid=73746f726d2e6d675f66396662373236386462386564333633_1563455352 因為連過去Thimble要註冊時，它說要搬家了，我就直接用它新合作的Glitch註冊放專案，也是免費的。
版主好~~這次好多似懂非懂的用法看得霧煞煞……憑感覺拼拼湊湊勉強完成了第三次的作業,很多用法沒用到寫得也不精簡……再麻煩版主幫忙看看喔~謝謝! https://jsfiddle.net/Jessica35/dzucwxg5/251/ 另外想請問一下有些地方CSS我有寫顏色，可是都沒有呈現出來，是我寫錯了還是需要寫在html呢？像是最上面facebook、line到忠於真實這整個部份還有文章標題上面的下班經濟學、新新聞和台灣外交等都是沒有呈現所寫的顏色
老師好，我完成第三課作業了，做到最後有想嘗試媒體查詢，但是拉起來好像怪怪的，左邊的主內容區會整個消失，請問是因為設成固定寬度的問題嗎? https://jsfiddle.net/ccyingo/b6tpkhqc/11/ 原檔:https://www.storm.mg/article/1521656?srcid=7777772e73746f726d2e6d675f64643530343235383764346663333766_1564204080
這一部分的東西有點雜，花了一點時間理解和做作業，但覺得樣子好像還是有點落差？ （個人覺得很醜Q＿Q）但想先貼上來確定是不是有符合作業標準。 作業：https://jsfiddle.net/KitHuang/fb5emjvy/87/