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