尤川豪   ·  5月前
Exp. 1,633  ·  213 貼文  ·  146 留言

自學網頁の嬰兒教材:第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 請對著元素按右鍵 -> 檢查

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

  分享   共 1,530 次點閱
共有 8 則留言
   ·  3月前
Exp. 62  ·  0 貼文  ·  7 留言

這一部分的東西有點雜,花了一點時間理解和做作業,但覺得樣子好像還是有點落差? (個人覺得很醜Q_Q)但想先貼上來確定是不是有符合作業標準。 作業:https://jsfiddle.net/KitHuang/fb5emjvy/87/

 
尤川豪   ·  3月前
Exp. 1,633  ·  213 貼文  ·  146 留言

哈囉 我看到你的作業囉

其實有過關囉!頁面大格局的切板,基本原理就是這樣 你都做到了

醜的話沒關係,內容跟細節可以再慢慢補 但是大原理你都懂囉

目標順利完成,期待看到你之後的其他作業!加油摟~

 
   ·  3月前
Exp. 7  ·  0 貼文  ·  1 留言

老師您好~~~ CSS 版面配置的教學 大概第十頁之後就看不太懂了 緩慢研究中Q.Q https://jsfiddle.net/14hpcfaj/6/
目前做了大概長這樣 請您過目 OAO

 
尤川豪   ·  3月前
Exp. 1,633  ·  213 貼文  ·  146 留言

嗨嗨~我看到你的作業囉~寫得很不錯喔,沒問題的~

上方欄位、側邊欄位都有出來,網頁排版的基本原理你已大致掌握!

部份教材看不太懂沒關係唷~改天有興趣再去翻閱就可以了

學習目標順利達成唷!繼續加油摟

期待看到你下一次的作業~

feifeitzu   ·  2月前
Exp. 121  ·  0 貼文  ·  21 留言

這部分花了一些時間在琢磨,但還是不太明白 flex 跟 inline-block 在使用時機上的差別。另外 @media 的部份也還沒做出來QQ,目前做了這樣:https://thimbleprojects.org/feifeitzu/636971/ 繼續努力研究中(;3」ㄥ)

 
尤川豪   ·  2月前
Exp. 1,633  ·  213 貼文  ·  146 留言

你好,我看到你寫的「以為只是太累,結果竟是腦中風差點送命!醫師嚴正提醒:出現這3症狀,速速送醫還有救!」

還原度非常高,寫得非常好,有95分,接近滿分

本課目標順利達成!

另外,關於你提到的問題,跟你分享兩篇文章

https://devs.tw/post/151

https://devs.tw/post/150

繼續加油!期待看到你下一次的作業!

   ·  2週前
Exp. 31  ·  0 貼文  ·  5 留言

嗨! 愚人節快樂!

排版的部分好複雜,還是硬著頭皮寫出來這些

謝謝你的教材跟幫助

這次的做業 https://jsfiddle.net/mooju7463/cegt2901/

原文 https://www.storm.mg/article/860547

 
尤川豪   ·  2週前
Exp. 1,633  ·  213 貼文  ·  146 留言

哈囉,看到「海平面升高7公尺」囉!

jsfiddle 畫面比較窄一些,不過意思有到。

合格,過關囉!

您的留言