尤川豪   ·  5年前
445 貼文  ·  275 留言

自學網頁の嬰兒教材:第2課 ── CSS 輕入門

⚠️⚠️⚠️ 公告 ⚠️⚠️⚠️

📢📢📢 本課程已有更新版本:請前往新版網站瀏覽、討論、交作業 📢📢📢

👉 點我前往新課程網站


第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,讓文字不要貼著邊邊,看起來比較舒服)

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

  分享   共 13,255 次點閱
共有 30 則留言
   ·  5年前
0 貼文  ·  5 留言

哈瞜,謝謝你的教材,這是我完成的作業 https://jsfiddle.net/mooju7463/yu24wnfp/79/ 原文:https://www.storm.mg/article/860547

想請問以這份作業來說在CSS當中 我第一個標題h1的所有css調整都run不動,當我為一開始的國際 影音 科學新知的標題做padding後,h1的css調整就run過了,這是什麼原因阿?

第一個人字,嘗試第一個字放大的效果還是失敗了 initial-letter這個與法好像無法使用,其他的做法也不行 ,請問哪邊做錯了呢? 謝謝你的幫助!

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

你好,我看到你的「海平面升高7公尺」作業了,內容沒問題,學習目標都有達成,別擔心

關於你的問題

  1. 看起來就是過程中有打錯字 之後誤打誤撞變正確而已

  2. 參考 https://devs.tw/post/157

黃俊豪  ·  5年前
0 貼文  ·  2 留言

Hello版主,這是我的第二份作業:https://jsfiddle.net/n19911028/p0fvL4ka/66/ 參考文章為:https://www.storm.mg/lifestyle/1126813
覺得比較可惜的點一直沒辦法像參考文章那樣只將第一個字放大

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

「低頭族」作業,寫得很好,別擔心!目標有順利完成!

關於第一個字,參考:https://devs.tw/post/157

JiaSin Choong  ·  5年前
0 貼文  ·  2 留言

版主你好,我完成了我的第二份作業:https://jsfiddle.net/elichoong/qhyvLmgx/108// 參考文章:https://www.storm.mg/lifestyle/1142662?srcid=gAAAAABcrrWh8uGS0EtBCAqM7QOgoMmRPOfMXH8ok51gga2jFHqvqjc9BhPyoluweYoIRvYvyNb8HAkPmOmA2zPJ1-0GiVzePeR7TTRGZZWWTxXK0X0jW9c%253D

參考了前面的留言,不知道為什麼第一個字放大之後無法佔據兩行的空間,只能像我做的這樣在第一行放大,有點苦惱QQ

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

別擔心,作業寫得很好!目標都有完成!

關於第一個字的問題,我也沒在實務上做過這種效果。

想要研究的話,可以 po 到發問區,大家一起討論討論!

tales   ·  5年前
0 貼文  ·  5 留言

你好,使用 ::first-letter 選取到段落中的首字之後,便可以將這個字設定為任意屬性,就像是另外將這個字包在一個標籤中再用 CSS 定義一樣

範例頁面中的首字佔用兩行的效果,是將首字設定為 float: left 。一旦加上了 float 的屬性,這個字就成為了浮動元素,不會與其他行內元素排列,會像是在水中的氣泡一樣浮動到母元素的頂端, float 是 left 就往左靠, 是 right 就往右靠,直到它碰到另一個浮動元素為止

而其他非浮動元素會繞過浮動元素,所以實際上這不是讓首字佔據兩排,而是

  1. 讓首字浮到左上方
  2. 其他的文字按照正常的方式繼續排列
  3. 其他文字繞開浮在左上方的浮動元素
  4. 左上方的浮動元素佔用的空間剛好等於兩行,所以排列到第三行的文字不會碰到浮動元素,不需要繞開它

所以看起來就像是首字一次佔據兩行。

然而設定為浮動元素之後,就會有一些副作用,比方說

  1. 母元素會當作裡面沒這個東西(無法使用浮動元素撐開母元素的尺寸)
  2. 非浮動元素會繞開浮動元素的這個特性,對其母元素之外的東西也有作用 (就是所謂的 "清除浮動" 問題)

所以 float 用在像是首字放大這種地方還好,用在其他排版目的上就要小心,能不用就儘量不要用,避免麻煩。

按了喜歡:
Chris Yang  ·  5年前
0 貼文  ·  2 留言
 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

「博恩脫口秀」作業沒問題

目標都有達成

繼續保持!

Will   ·  5年前
0 貼文  ·  1 留言
 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

「NBA季後賽》暴龍主場痛宰公鹿」沒問題

寫得很好 目標都有完成!

不過這裡是第二課的網頁,是不是貼錯地方了 XD

   ·  5年前
0 貼文  ·  6 留言

Hello 版主,我完成我的第二階段作業,再請你幫我看作業,謝謝~~

第二階段作業: https://jsfiddle.net/hannahtest190619/hz48nu5p/ 考文章: https://crossing.cw.com.tw/blogTopic.action?id=742&nid=11862

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

「外派年薪百萬」神話不再?技術傲人的台灣紡織業,面對怎樣的生存困境?

沒問題 寫得很好

學習目標都有完成 ^^

Clucky Lai   ·  5年前
0 貼文  ·  7 留言

老師您好,這是我的第二份作業:https://jsfiddle.net/ClarkLai/ko1cLmnz/6/ 參考文章:https://www.storm.mg/lifestyle/1405103?srcid=73746f726d2e6d675f66396662373236386462386564333633_1562936496 另外,想請教老師問題,我在jsfiddle貼上的code去run出來的顯示畫面和我自己瀏覽器上看到的有點不同,好像格式有些跑掉了。這是哪裡可以設定嗎? 附上自己瀏覽器上的截圖:https://ppt.cc/fxwlvx

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

阿拉丁是中國人,神燈精靈最早現身於唐朝傳奇!《阿拉丁》故事中的神祕異國想像

作業沒問題,目標都有達成,繼續保持~!

格式跑掉的問題,看起來一邊是中文黑體,一邊是中文明體

是哪邊的設定導致的需要用 browser developer tool 查詢一下才知道哦,目前我看不出是哪裡導致~

Jessica Chen  ·  5年前
0 貼文  ·  3 留言

版主好~~這是我的第二份作業,再麻煩您看看喔!謝謝! https://jsfiddle.net/Jessica35/dzucwxg5/17/ 有個小問題想請問,關於class=red的部分a:hover我是另外寫,請問這部分能直接加到.red裡面嗎?

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

天主教千年朝聖之路,為何讓韓綜藝之神都嚮往?《西班牙寄宿家庭》拍下這條路怎麼療癒人生

寫得非常好~

目標都有達成~!

關於你的問題

.red:hover {

}

直接動手試試看哦~

陳楚瑜  ·  5年前
0 貼文  ·  9 留言
 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

何志勇觀點:政治人物的「接地氣」只是一場秀

寫得很好

目標都有達成!

按了喜歡:
Bacon Lee   ·  5年前
0 貼文  ·  2 留言
 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

名人真心話》從1年被當15學分到台灣大總經理

做得非常棒,還原度很高

目標順利達成!

按了喜歡:
薛百九  ·  5年前
0 貼文  ·  2 留言

版主您好,這是我的第二份作業,連結:https://jsfiddle.net/shihsiansyue/gfvws487/6/; 參考文章:https://www.storm.mg/article/1648011; 再麻煩版主看看了,謝謝!

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

1個月5萬,不是退休金、是長照看護費!4個重點教你買對失能險、未來的你會感謝自己!

還原度非常高,寫得非常好

讚讚,繼續保持~

王馨君  ·  5年前
0 貼文  ·  3 留言

嗨!版主大大你好!這是我第二課的作業:https://jsfiddle.net/judy931490judy/g64o7hdy/38/ 文章連結:https://www.storm.mg/article/1677251 還有好多東西做不出來的感覺XDD,再麻煩大大看一下囉,謝謝!

 
按了喜歡:
尤川豪   ·  5年前
445 貼文  ·  275 留言

夏珍專欄:蔡英文與胡適

作業寫得很好~!

完成度很高~!

目標順利完成~!

按了喜歡:
   ·  4年前
0 貼文  ·  2 留言

版主您好!謝謝您幫我看了第一課的作業,加工後的第二課作業在這邊,再麻煩您,謝謝! 第二課作業: https://jsfiddle.net/PeiPeiYen/Lknach2u/150/ 參考文章:https://www.storm.mg/lifestyle/1929275

另外,關於首字跨行放大,有參考您提供的網站,但initial-letter被告知為是Unexpected unknown property,懇請賜教,謝謝您:)

 
按了喜歡:
尤川豪   ·  4年前
445 貼文  ·  275 留言

「成天賴在家裡、吃飯便溺全在電腦前…醫師:繭居族大多聽話守規矩,父母可用這五招幫助孩子」

作業沒問題!目標順利達成

第一個字的問題 請參考這篇

https://devs.tw/post/157

Terry Yu  ·  4年前
0 貼文  ·  2 留言

完成第二課囉 https://jsfiddle.net/e7pgq9vk/ 參考檔案 https://www.storm.mg/article/2590090

感謝版主提供這麼完整的資源 謝謝

 
Chuang Wen Hui  ·  3年前
0 貼文  ·  1 留言

版主你好感謝提供資源 這是我的第二份作業 https://jsfiddle.net/hedylol/fmo57s9y/ 參考檔案 https://www.storm.mg/article/3507547

 
   ·  3年前
0 貼文  ·  5 留言

版主大大好,已完成第二課 第二份作業:https://jsfiddle.net/boom017o/rdpanq3z/123/ 參考文章:https://www.storm.mg/article/3811671 感謝協助查看:)

 
您的留言