AC_SImpleShoppingPage 電商網頁切版

one page web project

使用技術

1. 單一軸向軸向資料流使用FLEX排版，兩個軸向的資料流則使用grid搭配auto-fit達到RWD效果
2. 超出容器大的照片使用object-fit裁減圖片但維持原比例，方形圖片使用 aspect-ratio達到1:1的比例
3. 使用hover搭配transition完成滑鼠移入(出)圖片時的換圖效果
4. 利用position讓navbar保持在網頁最上層，方便使用者點選
5. 使用Media Queries 進行RWD版面的切換

開發工具

• HTML
• CSS
• Font-awesome
• GoogleFonts