iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
自我挑戰組

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

Day14 網頁前端-刻意練習(英雄頁面#1)

  • 分享至 

  • xImage
  •  

Day14 AC 英雄頁面#1

https://ithelp.ithome.com.tw/upload/images/20200914/20129161VbEfnq6T6N.jpg
https://ithelp.ithome.com.tw/upload/images/20200914/20129161WsfiXLgCh5.png

簡單小語

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

筆記分享

  1. 樣板item上下錯開是利用margin-topmargin-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. Morehover到更換樣式提高使用者體驗。
  10. 善用:nth-child()即可選取到想要修改的樣式,方便好用。

刻意練習

Practice(200804 Day 14)

首次練習

A15: 打造你的英雄頁面


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


上一篇
Day13 網頁前端-刻意練習(切版練習)
下一篇
Day15 網頁前端-刻意練習(英雄頁面#2)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言