iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
1
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 12

Day12 網頁前端-刻意練習(不規則邊緣)

  • 分享至 

  • xImage
  •  

Day12 金魚 不規則邊緣

https://ithelp.ithome.com.tw/upload/images/20200911/20129161YTtGXT5skk.jpg
https://ithelp.ithome.com.tw/upload/images/20200911/20129161IfWbEDqL3F.png

簡單小語

這次的練習較為簡單些,主要就是每個元素的位置控制及掌握,才能讓不規則的邊緣呈現樣式,再利用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 網頁前端-刻意練習(不規則邊緣)


上一篇
Day11 網頁前端-刻意練習(多層次收合選單)
下一篇
Day13 網頁前端-刻意練習(切版練習)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
harry xie
iT邦研究生 1 級 ‧ 2020-09-22 22:49:23

切的版都蠻好看的/images/emoticon/emoticon12.gif

TerryYu iT邦新手 5 級 ‧ 2020-09-23 00:06:29 檢舉

沒吧@@

過獎了

您的效果我才甘拜下風

我要留言

立即登入留言