Day12 金魚 不規則邊緣

簡單小語

這次的練習較為簡單些，主要就是每個元素的位置控制及掌握，才能讓不規則的邊緣呈現樣式，再利用padding的方式向上推展才能讓圓不會遮到字，不過後來也發現用z-index就可以避免覆蓋的問題，所以每一次練習都有所收穫，剛好是第12天，下面的排版就用先前練習的網頁一覽表，突然發現每天寫寫寫也不知不覺寫了很多東西，不過是真的會不知道自己到底符不符合業界需求，總之，刻意練習，準備好自己，就對了。

筆記分享

1. 背景在嵌入圖片時一直出不來，才發現是結尾沒有寫.jpg，與程式無關，小細節提醒自己。
2. 使用box-shodow可以算是複製的概念，複製自己的樣式然後控制位置，不要渲染畫面(10px 10px 0 0)的話就是完全的複製囉。
3. background-position使用center center讓圖片置中。
4. background-size使用cover讓圖片不會變形。
5. background-repeat使用no-repeat讓圖片不會重複出現。
6. 使用.animate套件讓文字點擊後出現動畫效果，增添使用者互動性。
7. 偽元素可以做很多功能，例如list中的圓點及直線，需注意位置的控制，padding推移距離的些微計算。
8. RWD方面就比較單純的使用flex換行之後改變.item的寬度即可。
9. .wrap使用overflow: hidden讓多餘的box-shadow不會溢出。
10. 利用hover的方式即可觸摸後讓圓點變色，不過原點必須利用a的偽元素製作。

刻意練習

Practice(200801 Day 12)

首次練習

Practice(200602_不規則邊緣)

2020 iT邦幫忙鐵人賽 Day12 網頁前端-刻意練習(不規則邊緣)