Day14 AC 英雄頁面#1

簡單小語

之前在學習AC時做鋼鐵人的練習，當時就想有一天一定要做其他角色然後放上其餘資訊，所以到了今天就毫不猶豫的練習一波，光找資源圖就找了一陣子，好不費力，利用時間軸的概念呈現角色資訊，製作RWD時也是卡了一下，因此多做了幾個斷點，原因是字體太大將內容撐開後圖就變形了，使用許多偽元素及定位的方式進行樣式添加及位置擺放，大多數都使用:nth-child()進行選取，真的太好用啦，就不用多加命名class進行樣式處理，也用了些透明度的感覺提升瀏覽質感(咦!?自己說的算嗎?)。

筆記分享

1. 樣板item上下錯開是利用margin-top及margin-bottom去推開產生交錯感。
2. 內容左右錯開用flex-direction: row-reverse，讓圖文位置互換。
3. 圖片hover後放大使用transform:scale()然後在圖片img增加overflow: hidden就會產生自放大效果。
4. 時間軸都是利用::before及::after呈現，但還是會有些許尺寸沒算準確，導致都是用猜的確認位置。
5. list還額外增加了透明度背景，襯托內容的顯現。
6. RWD時得控版要注意，為了方便閱讀而把.text p給拿掉。
7. 文字排列呈現對稱感，比較沒有設計美感只好用對比襯托。
8. 圖片百分比%及位置須控制妥當，才不會忽大忽小。
9. More被hover到更換樣式提高使用者體驗。
10. 善用:nth-child()即可選取到想要修改的樣式，方便好用。

刻意練習

Practice(200804 Day 14)

首次練習

A15: 打造你的英雄頁面

2020 iT邦幫忙鐵人賽 Day14 網頁前端-刻意練習(英雄頁面#1)