iT邦幫忙

2023 iThome 鐵人賽

DAY 30
0
自我挑戰組

從零開始學習前端系列 第 30

#從零開始2️⃣9️⃣:切版實作(8)商品 RWD

  • 分享至 

  • xImage
  •  

github pages:https://rochelwang1205.github.io/sweetie/

github repo:https://github.com/rochelwang1205/sweetie

goods

在手機頁面上,只呈現了三個商品。

這邊用display:none的方式讓後三個商品不見:

https://ithelp.ithome.com.tw/upload/images/20231007/20159653KHzVAtH1qs.png

.d-padS-none{
    @include padS{
        display: none;
    }
  }

pagination

在小螢幕上,將頁碼選單置中:

https://ithelp.ithome.com.tw/upload/images/20231007/20159653RgkGxFE9th.png

.pagination {
  display: flex;
  justify-content: right;
  margin: 30px;
  max-width: 940px;
  @include laptopS{
    justify-content: center;
  }

💡分享:近期六角學院分享20份可商用得設計稿(真的太佛了),附上文章連結:https://www.facebook.com/hexschool/posts/pfbid02cDLUBSiErvbdgw9HtqeKWQpgCLWZEY8dvPtjq53VU6Amc9ayoxPGpvg7K9BFpyZZl(內含設計稿網址),分享給大家~

參考資料:

  1. 甜點店商設計稿(可商用)-吳俊儀:https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/grid/?fbclid=IwAR1FdRhh7aYFQ67oXv3lO1BfhPr7ScYLrSSB7J83txA2TmTDZHaMJxE8deI

以上實作僅根據此系列提到的部分進行練習,細節沒有完全符合設計稿。請斟酌參考。


上一篇
#從零開始2️⃣8️⃣:切版實作(7)商品
下一篇
#從零開始3️⃣0️⃣:後記
系列文
從零開始學習前端31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言