Day13 網頁前端-刻意練習(切版練習)

12th鐵人賽 html css jquery javascript

TerryYu

2020-09-13 07:35:20

1842 瀏覽

分享至

Day13 金魚切版練習

簡單小語

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

筆記分享

Day 13–1

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

Day 13–2

h1的標題圖片又再次驗證background-image大小控制的重要性，謹記。
寬度的比例也需拿捏妥當，大於768px時為95%，小於768px時為80%。
3. winning得底線控制就要用padding去推擠然後用border-bottom呈現樣式。
.sub-btn及.sub-link控制妥當就能在menu中點選後出現及隱藏。
終於手刻出點選btn更換樣式的方式，使用before及after控制樣式(可以群組式宣告但為了讓自己更好判讀因此冗長了點)。

.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;
}