iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
1
自我挑戰組

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

Day15 網頁前端-刻意練習(英雄頁面#2)

Day15 AC 英雄頁面#2

https://ithelp.ithome.com.tw/upload/images/20200915/20129161pGbzeJryno.jpg
https://ithelp.ithome.com.tw/upload/images/20200915/20129161lHlLykOSAw.png

簡單小語

雖然都是簡易排版及臨時起意的想法,可能實務上用到機會不大,加入了好久沒使用的輪播效果,認為目前尺寸的控制還需加強,常會在尺寸編排上混亂而不知道現在會變大變小,下方內容的編排概念就是橫排交錯,另外用了hover做了很多觸摸效果,類似人員介紹卡片的互動效果,透過AC課程一個簡易的作業進而讓我做了更多的練習,也是好處一樁,持續的刻意練習,一天一練習,觀念更釐清。

筆記分享

  1. 輪播套件Swiper的掌握,CSS及JavaScript都需要套用CDN才能正常使用。
  2. 一個頁面只有一個h1,因此勤加練習用文字取代圖片方式。
  3. 使用overflow: hidden達到圖片放大卻不會溢出的效果。
  4. 使用transform: translateY()達到觸摸後物件移動效果。
  5. 使用transform: scale()達成觸摸後曠散的效果。
  6. 內容排版刻意沒有對稱式,讓自己多加掌握排版的位置及方向。
  7. 顏色的置換真的沒有設計感,看來只剩前端工程師一條路哈哈。
  8. RWD就是要消除排版間的空隙重新分配,因手機螢幕小所以內容要過濾,排版要熟慮。
  9. RWD排版的文字內容會撐開,因此過濾掉一些內容框架不會被撐開,RWD需顧及手機使用者對於內容複雜度的影響。
  10. paddingmargin的掌握需勤加熟悉,才能切出完美又符合需求的樣式。

刻意練習

Practice(200805 Day 15)

前次練習

Practice(200804 Day 14)


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


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

尚未有邦友留言

立即登入留言