iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
自我挑戰組

向CSScoke重新學習CSS 系列

大家好,我是洋蔥,第一次參加鐵人賽,這次是抱著把CSS練好的心態來向CSScoke學習,因此主要內容是在實踐看完CSScoke金魚都能懂的網頁教學後做的一些練習及一些心得

鐵人鍊成 | 共 30 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文
DAY 1

第一天:各位小金魚一起來學 CSS

大家好,我是洋蔥,這次我第一次參加鐵人賽,這次主題是想要好好把CSS的基礎底子打好,因此每天會把看完CSScoke的金魚都能懂的HTML教學做整理,並寫成自己...

2020-09-15 ‧ 由 洋蔥 分享
DAY 2

第二天:學習CSS前,先要知道HTML的基本標籤

可以搭配 CSScoke 金魚都能懂網頁教學part1、part2、part3 作為學習 在開始學習CSS前,我們要先知道HTML、CSS、Javacri...

2020-09-16 ‧ 由 洋蔥 分享
DAY 3

第三天:開始使用XMind 做CSS的心智圖筆記

觀看金魚都能懂的網頁設計入門:1-7天 由於這次是想要對CSS做更進一步學習,就沒有再對HTML做多的筆記,若對HTML不了解的小金魚們,可以直接觀看CSSco...

2020-09-17 ‧ 由 洋蔥 分享
DAY 4

第四天:盒模型計算

觀看金魚都能懂網頁設計入門 8 一個物件到底在畫面上佔據多少呢? 以上面範例來計算: 看得到的尺寸 看不到的尺寸 width + border...

2020-09-18 ‧ 由 洋蔥 分享
DAY 5

第五天:老派的Float !!

觀看金魚都能懂網頁設計入門 9 什麼時候會用到呢? 在舊有的系統維護時會運用到,而且float可以運用在文繞圖或是多欄版式面邊排 想像一下Float在現實中...

2020-09-19 ‧ 由 洋蔥 分享
DAY 6

第六天:block和inline的愛恨情仇?

觀看金魚都能懂網頁設計入門 10 這是關於一對夫妻之間的小秘密, ( block ) 是爸爸,他有一個有名的外號:站位哥,因為他每次搭捷運時,總是喜歡一個人...

2020-09-20 ‧ 由 洋蔥 分享
DAY 7

第七天:跨時代屬性box-sizing和Css.reset小知識

觀看金魚都能懂網頁設計入門 11、12 還不觀看影片前,對於box-sizing其實就還懞懞懂懂,只知道設定了 box-sizing ,就不需要去計算增加多少...

2020-09-21 ‧ 由 洋蔥 分享
DAY 8

第八天:Flex,淺短了解

觀看金魚都能懂的網頁設計入門:13天 目前而言,flex就是不支援IE,因此維護IE網站時,還是需要了解一下float 有了flex這個東西後,排版變得更加容...

2020-09-22 ‧ 由 洋蔥 分享
DAY 9

第九天:定位的學問?

觀看金魚都能懂網頁設計入門 14 ~ 16 在Css位置屬性裡,有 position: relative; position: fixed;...

2020-09-23 ‧ 由 洋蔥 分享
DAY 10

第十天:從基本排版中運用的小知識

觀看金魚都能懂網頁設計入門 17 https://codepen.io/mikeyam/pen/WNwPzpy 小練習 從排版練習中,學到許多垂直置中技巧 垂直...

2020-09-24 ‧ 由 洋蔥 分享