第2課 課程目標

學會用id、class、元素名稱來指定特定元素

學會用CSS來替文字加上設計感,替文字變色、變大小、設計邊框、寬度、留白等等

第2課 課程內容

用jsfiddle來練習:

https://jsfiddle.net

這次要寫HTML跟CSS兩個區塊

請閱讀並練習這11份教學(不要緊張,內容很簡單):

CSS Syntax

CSS Colors

CSS Backgrounds

CSS Borders

CSS Margins

CSS Padding

CSS Height/Width

CSS Box Model

CSS Text

CSS Fonts

CSS Links

不習慣看英文,可以改看這裡:

CSS 基础语法

CSS id 选择器

CSS 类选择器

CSS 背景

CSS 框模型概述

CSS 内边距

CSS 边框

CSS 外边距

CSS 字体

CSS 文本

CSS 链接

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

讀完、練習完這11份教學裡面的程式碼,就算是學會CSS的基礎,能夠用CSS做美工、排版、設計了

第2課 作業

你在第1課的作業利用HTML,模仿風傳媒的文章,做了基本的文章排版。

這次的作業,請使用本次學到的內容,把上次的作業拿出來改,替文章加上各種色彩、字體大小、各種排版,讓文章看起來變漂亮。

(請至少替文章加上padding,讓文字不要貼著邊邊,看起來比較舒服)

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


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!

按讚的人:

共有 74 則留言

https://jsfiddle.net/s12qdbrL/2/ 應該是有練習到吧.. 感覺自己好像塞了一些無意義程式碼的舉動 雖然結果是有更動的

按讚的人:

沒問題,寫得很好!作業順利通過!

先不用擔心無意義程式碼 先讓程式能跑、效果有出來就好,程式碼品質可以在日後慢慢研究、改善

按讚的人:

練習完成,再麻煩您看一下,謝謝。 https://jsfiddle.net/po9rx8a1/4/

按讚的人:

寫得很好,順利完成!

繳交第二次作業~ https://jsfiddle.net/jim041116/890du7qe/30/

按讚的人:

寫得很好,順利完成!

練習完成,請站長協助查看。

https://jsfiddle.net/maddy770803/jtp62q5g/14/

按讚的人:

寫得很好,樣式很漂亮!繼續保持!

https://jsfiddle.net/elmon/bzrsvo6w/3/

把上一份作業加上 CSS 不過好像第一個背景想要做灰色沒有做出來

按讚的人:

內容沒有樣式,這連結跟前一份作業一樣,是不是沒有按到儲存?

灰色背景等等技術問題,請到討論專區發問喔!

對耶!sorry 我改完之後再重新貼連結上來

謝謝站長

交作業~ 謝謝站長 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/jared0921/jpxaq92y/55/

按讚的人:

嘗試寫看看 https://jsfiddle.net/cp9o8qya/

按讚的人:

寫得很好,順利完成!

寫得很好,順利完成!

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/tony05060165/z03pt61n/24/

按讚的人:

寫得很好,順利完成!

練習完成,請站長老師協助查看謝謝 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/

練習完成,再麻煩站長幫忙檢查了!謝謝你~

按讚的人:

寫得很好,順利完成!

繳交作業, 麻煩站長了, 謝謝! https://jsfiddle.net/v8q7pz1d/27/

按讚的人:

第二份作業繳交,謝謝站長~ https://jsfiddle.net/ayakaka/c7j9s2mh/130/

按讚的人:

繳交作業,再麻煩您幫我檢視了,謝謝 https://jsfiddle.net/frog0708/w6osxjhz/26/

按讚的人:

2024.02.06 繳作業! https://jsfiddle.net/hnvae5cp/
寫CSS的心得之一:需要很多命名class的idea還有英文詞彙量😅
以我的作業為例,同樣為橘色按鈕但要設定的padding不同,不知道該取不同class名,然後用多重選取器設定需要相同屬性值的CSS,之後再分開個別設定不同之處;還是說就用同個class設定需要相同的屬性,再一層一層慢慢選到要個別設定差異。我目前的做法是用後者處理

按讚的人:

2024/0211 第二份作業繳交 謝謝 https://jsfiddle.net/gustavofring/7rbLpxw4/29/

按讚的人:

20240225 交作業,謝謝!https://jsfiddle.net/ev9m10cq/1/

按讚的人:

繳交作業 謝謝! 參考原址:https://www.storm.mg/lifestyle/5036333 原始HTML:https://jsfiddle.net/etai200/v2pLaf7z/36/ 加上CSS:https://jsfiddle.net/etai200/mcejyfoh/99/

按讚的人:

繳交作業 # 20240301 https://jsfiddle.net/8hmu0q5w/1/ 謝謝站長~~

按讚的人:

繳交作業謝謝!https://jsfiddle.net/ryjds48o/39/

按讚的人:

交作業了,花了點時間一直在糾結 「+追踪 」的那個按鈕: https://jsfiddle.net/applelily/4kuo01L6/ 如果我在 按鈕:active 設定 font-size: 50%, 整個版面會往上移, 後來改成 transform: scale(0.9);

按讚的人:

交作業拉:https://jsfiddle.net/max002215/k9b6vquw/186/ 有些東西糾結很久,不知道該不該做,後來只照著站長的要求做出

按讚的人:

遲繳的作業:https://jsfiddle.net/Obivld13/b534swmh/20/ 主要是嘗試硬加一些css的運用 沒有跟著網頁排版跑

按讚的人: