[Alpha Camp] 電商網頁切版初體驗


Posted by OsmandLN on 2021-12-14

  • 你為何會選擇這個專案?
    現在電商平台極為常見,如果以求職市場的需求做為出發點,能夠用CSS切出一個簡潔俐落的網頁畫面是不可或缺的技能,故選擇以此切入做練習。

  • 你使用了什麼技術?
    考量工具上的適用性,就排版方面: 區塊間的流動性排版使用了Grid system,而在區塊內元素則使用Flex system做調整,而在定位方面則使用到了position去做父層及子層間相對位置的設定,在實穿照的顯示方面,則是透過opacity屬性的數值變化搭配hover這個psuedo class去做出效果。

  • 哪部分你相對能掌握?哪裡花了最多時間?
    在基本屬性如字體、顏色及背景設定及flex properties使用上(對應到區塊內元素的排版)相對比較有把握,而在運用position設定相對位置及RWD排版上,反而比較苦手。

  • 過程中碰到什麼困難?又如何克服?(例如:查找網路文件)
    不了解星形選擇器的使用,查找他人技術部落格的解說

  • 過程中你有對哪個前端技術有特別深刻的學習?
    RWD的實現,因為隨著螢幕尺寸的變化,頁面的呈現上會有一定程度的變動,需要去思考如何讓頁面可以朝著目標的layout呈現出來,也需要在使用者體驗與呈現更多資訊兩者之間,盡力去找到平衡。


#layout #css







Related Posts

遠端主機部署心得筆記

遠端主機部署心得筆記

元件介紹-Day03 #元件樣板及綁定方法

元件介紹-Day03 #元件樣板及綁定方法

JavaScript 是如何被執行的 (2)?

JavaScript 是如何被執行的 (2)?


Comments