Devs.tw 是讓工程師寫筆記、網誌的平台。歡迎您隨手紀錄、寫作，方便日後搜尋！
Devs.tw 是讓工程師寫筆記、網誌的平台。歡迎您隨手紀錄、寫作，方便日後搜尋！
學會用id、class、元素名稱來指定特定元素
學會用CSS來替文字加上設計感，替文字變色、變大小、設計邊框、寬度、留白等等
用jsfiddle來練習：
這次要寫HTML跟CSS兩個區塊
請閱讀並練習這11份教學（不要緊張，內容很簡單）：
不習慣看英文，可以改看這裡：
把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。
讀完、練習完這11份教學裡面的程式碼，就算是學會CSS的基礎，能夠用CSS做美工、排版、設計了
你在第1課的作業利用HTML，模仿風傳媒的文章，做了基本的文章排版。
這次的作業，請使用本次學到的內容，把上次的作業拿出來改，替文章加上各種色彩、字體大小、各種排版，讓文章看起來變漂亮。
（請至少替文章加上padding，讓文字不要貼著邊邊，看起來比較舒服）
完成這些，你就完成這次的課程目標了！
Hello版主，這是我的第二份作業：https://jsfiddle.net/n19911028/p0fvL4ka/66/ 參考文章為：https://www.storm.mg/lifestyle/1126813
覺得比較可惜的點一直沒辦法像參考文章那樣只將第一個字放大
版主你好，我完成了我的第二份作業：https://jsfiddle.net/elichoong/qhyvLmgx/108// 參考文章：https://www.storm.mg/lifestyle/1142662?srcid=gAAAAABcrrWh8uGS0EtBCAqM7QOgoMmRPOfMXH8ok51gga2jFHqvqjc9BhPyoluweYoIRvYvyNb8HAkPmOmA2zPJ1-0GiVzePeR7TTRGZZWWTxXK0X0jW9c%253D
參考了前面的留言，不知道為什麼第一個字放大之後無法佔據兩行的空間，只能像我做的這樣在第一行放大，有點苦惱QQ
你好，使用 ::first-letter 選取到段落中的首字之後，便可以將這個字設定為任意屬性，就像是另外將這個字包在一個標籤中再用 CSS 定義一樣
範例頁面中的首字佔用兩行的效果，是將首字設定為 float: left 。一旦加上了 float 的屬性，這個字就成為了浮動元素，不會與其他行內元素排列，會像是在水中的氣泡一樣浮動到母元素的頂端， float 是 left 就往左靠， 是 right 就往右靠，直到它碰到另一個浮動元素為止
而其他非浮動元素會繞過浮動元素，所以實際上這不是讓首字佔據兩排，而是
所以看起來就像是首字一次佔據兩行。
然而設定為浮動元素之後，就會有一些副作用，比方說
所以 float 用在像是首字放大這種地方還好，用在其他排版目的上就要小心，能不用就儘量不要用，避免麻煩。
HI版主~
我完成了第二階段的作業 https://jsfiddle.net/chrisyang/rsh1z4vg/84/ 參考文章 https://www.storm.mg/article/1213145?srcid=gAAAAABcwIJt37dgy_kE54IEeULw1x_EWPg9cXcE1Oec4UDe552ij5fdOsN33QpIumFEW_wSao7TZydsPLc5H_Uxfmfr5dkPKVse0ztWJh0relznOMlarWI%253D
感謝撰文指導～！
Hello，這是我的第一份作業：https://jsfiddle.net/Will_Huang/g35ho1y0/31/ 參考文章為：https://www.storm.mg/article/1311107?srcid=7777772e73746f726d2e6d675f35393932643237666266353438313366_1558516706
請在幫我看看 謝謝
Hello 版主，我完成我的第二階段作業，再請你幫我看作業，謝謝~~
第二階段作業: https://jsfiddle.net/hannahtest190619/hz48nu5p/ 考文章: https://crossing.cw.com.tw/blogTopic.action?id=742&nid=11862
老師您好，這是我的第二份作業：https://jsfiddle.net/ClarkLai/ko1cLmnz/6/
參考文章：https://www.storm.mg/lifestyle/1405103?srcid=73746f726d2e6d675f66396662373236386462386564333633_1562936496
另外，想請教老師問題，我在jsfiddle貼上的code去run出來的顯示畫面和我自己瀏覽器上看到的有點不同，好像格式有些跑掉了。這是哪裡可以設定嗎?
附上自己瀏覽器上的截圖：https://ppt.cc/fxwlvx。
版主好~~這是我的第二份作業，再麻煩您看看喔！謝謝! https://jsfiddle.net/Jessica35/dzucwxg5/17/ 有個小問題想請問，關於class=red的部分a:hover我是另外寫，請問這部分能直接加到.red裡面嗎？
這是我第二個作業~ 再請老師幫我看一下作業~~ https://jsfiddle.net/ccyingo/w9sc12d7/68/ 參考網址:https://www.storm.mg/article/1521656?srcid=7777772e73746f726d2e6d675f64643530343235383764346663333766_1564204080
版主你好 這是我的第二個作業，再麻煩看一下~https://jsfiddle.net/bacon0811/fxsj6pa5/8/ 參考網址: https://www.storm.mg/article/1512037?srcid=7777772e73746f726d2e6d675f64356232613534666431636130333837_1565570618
謝謝你!
版主您好，這是我的第二份作業，連結：https://jsfiddle.net/shihsiansyue/gfvws487/6/； 參考文章:https://www.storm.mg/article/1648011； 再麻煩版主看看了，謝謝！
嗨！版主大大你好！這是我第二課的作業：https://jsfiddle.net/judy931490judy/g64o7hdy/38/ 文章連結：https://www.storm.mg/article/1677251 還有好多東西做不出來的感覺XDD，再麻煩大大看一下囉，謝謝！
版主您好！謝謝您幫我看了第一課的作業，加工後的第二課作業在這邊，再麻煩您，謝謝！ 第二課作業: https://jsfiddle.net/PeiPeiYen/Lknach2u/150/ 參考文章:https://www.storm.mg/lifestyle/1929275
另外，關於首字跨行放大，有參考您提供的網站，但initial-letter被告知為是Unexpected unknown property，懇請賜教，謝謝您:)
完成第二課囉 https://jsfiddle.net/e7pgq9vk/ 參考檔案 https://www.storm.mg/article/2590090
感謝版主提供這麼完整的資源 謝謝
版主你好感謝提供資源 這是我的第二份作業 https://jsfiddle.net/hedylol/fmo57s9y/ 參考檔案 https://www.storm.mg/article/3507547
版主大大好，已完成第二課 第二份作業：https://jsfiddle.net/boom017o/rdpanq3z/123/ 參考文章：https://www.storm.mg/article/3811671 感謝協助查看:)
哈瞜，謝謝你的教材，這是我完成的作業 https://jsfiddle.net/mooju7463/yu24wnfp/79/ 原文:https://www.storm.mg/article/860547
想請問以這份作業來說在CSS當中 我第一個標題h1的所有css調整都run不動，當我為一開始的國際 影音 科學新知的標題做padding後，h1的css調整就run過了，這是什麼原因阿?
第一個人字，嘗試第一個字放大的效果還是失敗了 initial-letter這個與法好像無法使用，其他的做法也不行 ，請問哪邊做錯了呢? 謝謝你的幫助!
你好，我看到你的「海平面升高7公尺」作業了，內容沒問題，學習目標都有達成，別擔心
關於你的問題
看起來就是過程中有打錯字 之後誤打誤撞變正確而已
參考 https://devs.tw/post/157