[心得] 電商網頁切版

Codepen：https://codepen.io/jujuchu/pen/KKgbRzY

特色

• 滑鼠滑到假圖上會出現 model 試穿的照片，滑鼠離開回到假圖
• 依據螢幕大小動態調整一列展示出來的衣服數量

為何會選擇這個專案？

這個專案能練習到 CSS Grid 的排版方法，用 Grid 搭配 auto-fit 做出 RWD 的效果。
能依據螢幕寬度動態調整一列展示出來的衣服數量。

除此之外還能練習到在電商網站常見的 hover 效果，例如滑鼠滑到商品上會出現 model 的實穿照。

使用了什麼技術？

• position
  用絕對數值去控制元素的位置。
  搭配 z-index 能讓導覽列固定在視窗最上方。
• CSS Grid: auto-fit
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  運用 auto-fit 搭配 minmax 可以做出自動換行的效果。
  且因為格子的最大值設定為 1fr，所以當寬度變寬時格子會自動延伸，直到整體寬度能再多出一個新格子時，寬度才會在變小成最小值設定的 300px。
• opacity
  滑鼠滑過商品時，用透明的方式讓假圖隱形。
  設定 opacity: 0;

實作時的掌握狀況

HTML架構用 1 小時完成，CSS則需用到 3 個小時。

實作 CSS 時，上到下照著 HTML 的架構依據手機優先的方式進行，先將排版整理好，再做各個小區塊的美化和調整。

全域的排版需要時間但不會太困難，實作過程很流暢。
各個小區塊的美化和調整比較會需要查找方法，和確定功能運作正常。

過程中碰到什麼困難？如何克服？

之前的練習著重在認識 HTML 和 CSS 的樣式，通常直接套用 Bootstrap。
而這次嘗試不用 Bootstrap，自己查找 CSS 做出美化的效果。

大大感受到 Bootstrap 做了很多，例如 input 的格子有許多預設的樣式都要先找到語法解除掉，如 border: unset; outline: none;。

解除掉後就可以依據自己希望的樣子設計。

過程中對哪個前端技術有特別深刻的學習？

CSS Grid！

如果會用 Grid，排版大量商品時可以變得很優雅，不用辛辛苦苦設計不同螢幕寬度要配怎樣的版型。

想再花時間好好研讀 CSS-TRICKS 的文章。