https://caniuse.com/
成為 CSS 團隊的一員:CSS 團隊開發的最佳實踐
本文分享了 如何最佳化管理與維護日益增加的 CSS 文件內容
無論是對個人還是團隊來說,這點很重要!!!
原文:https://msdn.microsoft.com/en-us/magazine/ff679957.aspx
中文翻譯:http://msdn.microsoft.com/zh-tw/magazine/ff679957.aspx
CSS 版面配置
http://zh-tw.learnlayout.com
https://www.slideshare.net/jaceju/css-1104887
網頁排版 (單欄式、二欄式、三欄式)
http://www.wibibi.com/info.php?tid=405
http://www.wibibi.com/info.php?tid=406
http://www.wibibi.com/info.php?tid=407
CSS 排版兩大利器:Flexbox vs Grid
https://21st.each1.net/2018/11/css-flexbox-vs-grid.html
好用的 css 3新單位 vh vw ─ 讓你的圖片可以隨著螢幕大小而不同
https://pjchender.blogspot.com/2015/04/css-3vh-vw.html
用 CSS的 table屬性取代 古早的 table排版
https://www.minwt.com/webdesign-dev/css/6694.html
float 浮動元素 (比如說 文字繞著浮動的圖片 等應用)
http://www.wibibi.com/info.php?tid=167
常見的 30 種 CSS 選擇器
https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048
選擇器中的大於(>)
https://pjchender.blogspot.com/2015/07/css.html
多重選擇器 (包含空白或逗號)
https://pjchender.blogspot.com/2015/03/cssmultiple-selectorsspace.html
CSS 偽元素 ( before 與 after )
http://www.oxxostudio.tw/articles/201706/pseudo-element-1.html
CSS3 :nth-child(n) 選取器教學
http://csscoke.com/2013/09/21/%E4%BD%BF%E7%94%A8css3-nth-childn-%E9%81%B8%E5%8F%96%E5%99%A8%E8%A9%B3%E8%A7%A3/
https://www.w3schools.com/howto/howto_css_switch.asp
https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp
https://dotblogs.com.tw/knightzone/2013/09/07/116716
使用@keyframes建立動畫內容
animation: name duration timing-function delay iteration-count direction;
animation-name: 動畫名稱;
animation-duration: 動畫作用時間;
animation-timing-function: 動畫補間時運用的計算公式;
animation-delay: 動畫需間隔多久後才開始;
animation-iteration-count: 動畫作用次數;
animation-direction: 動畫作用的方向;
timing-function有linear、ease、ease-in、ease-out、ease-in-out可以用,或者可用cubic-bezier(n,n,n,n)來自己制定(0 <= n <= 1)。
至於iteration-count如果要無限多次可用infinite。
最後動畫作用的方向指的是動作作用的時候可以是@keyframes相反的方向(to->from、100%->0%)(reverse),或是作用完後又回頭(alternate)、或是先相反再變正常順序(alternate-reverse)。