第2課 課程目標
學會用id、class、元素名稱來指定特定元素
學會用CSS來替文字加上設計感，替文字變色、變大小、設計邊框、寬度、留白等等
第2課 課程內容
用jsfiddle來練習：
這次要寫HTML跟CSS兩個區塊
請閱讀並練習這11份教學（不要緊張，內容很簡單）：
不習慣看英文，可以改看這裡：
把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。
讀完、練習完這11份教學裡面的程式碼，就算是學會CSS的基礎，能夠用CSS做美工、排版、設計了
第2課 作業
你在第1課的作業利用HTML，模仿風傳媒的文章，做了基本的文章排版。
這次的作業，請使用本次學到的內容，把上次的作業拿出來改，替文章加上各種色彩、字體大小、各種排版，讓文章看起來變漂亮。
（請至少替文章加上padding，讓文字不要貼著邊邊，看起來比較舒服）
完成這些，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
練習完成，再麻煩您看一下，謝謝。
https://jsfiddle.net/po9rx8a1/4/
練習完成，請站長協助查看。
https://jsfiddle.net/elmon/bzrsvo6w/3/
把上一份作業加上 CSS 不過好像第一個背景想要做灰色沒有做出來
交作業~ 謝謝站長
https://jsfiddle.net/j437437/1uqypkx3/149/
(好後悔挑了麥當勞的新聞XD 半夜越做越餓)
繳作業~
雖然有好多東西想塞，但是塞進去感覺有點多餘，乾脆就不塞了...
再麻煩站長檢查了，謝謝。
https://jsfiddle.net/n7z1cvse/2/
繳交作業~麻煩校閱!!謝謝
https://jsfiddle.net/973224/mg7x4bj3/136/
繳交第2次作業，麻煩阿川老師幫忙檢查了，雖然有寫出來，但感覺都像硬湊的，也不知道這樣寫是否正確寫法，然後我的body{padding:20}左右兩邊的寬度會不一樣，困擾好久，麻煩站長幫我解惑一下。
https://jsfiddle.net/johnny890118/k3os49dL/58/
交作業，麻煩站長了!
https://jsfiddle.net/Hoce1029/nvx62y9d/104/
感覺還有很多東西能加但又不知道該加什麼..
交作業，再麻煩站長了!
https://jsfiddle.net/8ujsvd1y/1/
交作業謝謝站長 https://jsfiddle.net/tc9p0kgw/2/
https://jsfiddle.net/Poyenlin/rskyew3L/95/
再麻煩檢查一下，感覺沒甚麼美術的天分~~
https://jsfiddle.net/tsaii/ocpaLrf8/2/
交作業～再麻煩過目了，謝謝！
繳交作業~不過好像是搞錯作業要求了，直接照著風傳媒的排版去模仿XD再麻煩站長檢查了，謝謝！
https://jsfiddle.net/e94m2r6o/
https://jsfiddle.net/ElaineYang/m2nzu08d/12/
第一次繳交作業!再麻煩站長檢查了~~謝謝您
https://jsfiddle.net/victoria304040/7y4u8rzo/29/
繳交作業，再請您協助查看確認，謝謝!
第二份作業完成，麻煩站長檢查了，謝謝！
https://jsfiddle.net/Departed/npe3g1hf/114/
繳交第二次作業 感覺排版是門學問
還請站長協助查看 謝謝
https://jsfiddle.net/eric60305/mzx7ybrd/76/
練習完成，請站長老師協助查看
謝謝
https://jsfiddle.net/paul_chu/e3nf0r6w/39/
第二次交作業，再請站長老師幫我查看看，這個作業我好像沒改什麼的感覺 內邊距跟外邊距有點深奧
https://jsfiddle.net/stevencanweb/fgzam2s3/206/
練習完成，請站長老師協助查看謝謝 https://jsfiddle.net/wimp9487/0e5zqcux/2/
繳交第二次作業，再麻煩您看一下，謝謝。
https://jsfiddle.net/000dd/5qn7jxdb/4/
前面站長有回覆樣式的問題，立刻來看第2課
把前一次編排都重新用新方式寫過了!
站長在檢查! 感謝
https://jsfiddle.net/liang10000/tj5c3y2x/77/
https://jsfiddle.net/Pansen/y2zsj1ga/56/
繳交第二分作業，雖然不太確定是否有多餘的code，麻煩站長檢查，謝謝!
https://jsfiddle.net/jdps40734/no6vx9p5/68/
練習完成，再麻煩站長幫忙檢查了!謝謝你~
2024.02.06 繳作業！ https://jsfiddle.net/hnvae5cp/
<br />
寫CSS的心得之一：需要很多命名class的idea還有英文詞彙量😅
<br />
以我的作業為例，同樣為橘色按鈕但要設定的padding不同，不知道該取不同class名，然後用多重選取器設定需要相同屬性值的CSS，之後再分開個別設定不同之處；還是說就用同個class設定需要相同的屬性，再一層一層慢慢選到要個別設定差異。我目前的做法是用後者處理
2024/0211
第二份作業繳交
謝謝
https://jsfiddle.net/gustavofring/7rbLpxw4/29/
繳交作業 謝謝!
參考原址:https://www.storm.mg/lifestyle/5036333
原始HTML:https://jsfiddle.net/etai200/v2pLaf7z/36/
加上CSS:https://jsfiddle.net/etai200/mcejyfoh/99/
交作業了，花了點時間一直在糾結 「＋追踪 」的那個按鈕： https://jsfiddle.net/applelily/4kuo01L6/
如果我在 按鈕:active 設定 font-size: 50%, 整個版面會往上移, 後來改成 transform: scale(0.9);
交作業拉:https://jsfiddle.net/max002215/k9b6vquw/186/
有些東西糾結很久，不知道該不該做，後來只照著站長的要求做出
https://jsfiddle.net/s12qdbrL/2/
應該是有練習到吧..
感覺自己好像塞了一些無意義程式碼的舉動
雖然結果是有更動的