iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 13
0

Day13 金魚 切版練習

https://ithelp.ithome.com.tw/upload/images/20200912/20129161tNxzHAoMKl.jpg
https://ithelp.ithome.com.tw/upload/images/20200912/201291613itDONF194.png

簡單小語

金魚的尾聲,總結一下自己練習所學,因此就上網找了兩個字認為切得出來的樣板進行練習(太難的小魯功力不足),練習的過程也真的是一再發現自己不熟不清楚的地方,真的覺得位置的控制,偽元素的使用,Flex的應用很重要,一再的練習讓自己維持手感,也增添思考空間,樣板的很多圖都是現成套入,不過像Day 13–2的btn這次終於用手刻出來了,善用偽元素真的很重要哈哈,也算小小里程碑把之前看到別人做的樣式自己刻出來,金魚的刻意練習就告一段落了,接下來就準備往下個課程(Alpha Camp)的作業做刻意練習了。

筆記分享

Day 13–1

  1. 基礎練習header的用法,因此樣板沒有提供RWD樣式,因此就自己製作。
  2. background-image的大小控制很重要,建議都是用父層的長寬進行控制,background-size就維持100%(但也還是有例外就是哈哈)。
  3. FeatureHairstyle是用定位方式進行排列,內部先用padding推出一個空間。
  4. hair-item樣板的陰影,一開始以為是用box-shadow做出來的,後來才發現是一張圖片(暈ing),不過我認為手刻應該刻出來,需要思考下。
  5. 右下方的人像有巧思需要蓋過方框,因此使用z-index進行覆蓋,不過尺寸在RWD真的不好控制,也可能是我熟練度不足。

Day 13–2

  1. h1的標題圖片又再次驗證background-image大小控制的重要性,謹記。
  2. 寬度的比例也需拿捏妥當,大於768px時為95%,小於768px時為80%
    3.winning得底線控制就要用padding去推擠然後用border-bottom呈現樣式。
  3. .sub-btn.sub-link控制妥當就能在menu中點選後出現及隱藏。
  4. 終於手刻出點選btn更換樣式的方式,使用beforeafter控制樣式(可以群組式宣告但為了讓自己更好判讀因此冗長了點)。
.btn.active::after {
  width: 25px;
  box-shadow: none;
  transform: rotate(45deg);
}
.btn.active::before {
  content: "";
  width: 4px;
  height: 25px;
  background-color: black;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  transform: rotate(45deg);
}
.btn::after {
  content: "";
  width: 20px;
  height: 4px;
  background-color: black;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  box-shadow: 0 8px 0 black, 0 -8px 0 black;
}

刻意練習

Practice(200803 Day 13-1)
Practice(200803 Day 13–2)

樣板來源

Sample Template 1
Sample Template 2


2020 iT邦幫忙鐵人賽 Day13 網頁前端-刻意練習(切版練習)


上一篇
Day12 網頁前端-刻意練習(不規則邊緣)
下一篇
Day14 網頁前端-刻意練習(英雄頁面#1)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

尚未有邦友留言

立即登入留言