iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
自我挑戰組

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

Day19 網頁前端-刻意練習(Flex時光屋#1)

  • 分享至 

  • xImage
  •  

Day19 六角 Flex時光屋#1

https://ithelp.ithome.com.tw/upload/images/20200919/20129161t8MA3oF7em.jpg
https://ithelp.ithome.com.tw/upload/images/20200919/20129161TQfSMGcLM6.png

簡單小語

看到當時時光屋練習的作品,想說挑兩個來整併,當作練習的機會,這次的結構不一樣的是,headerfooter使用相同結構的套用,在製作上來就互叫醒時間,僅需細節的對位及樣式修改,因為想不到什麼好的修改樣式就硬是做了一個哈哈,練習JQuery的收合式選單及側邊收合式選單,找回些微動畫的練習模式,發現目前都是很單純觸發事件,看來JavaScript還需努力學習,才能讓畫面增添豐富色彩。

筆記分享

  1. header就是用先前練習的menu方式進行排列及收合,加深印象,找回手感。
  2. font-awesome 的變化使用觸發後的transform:rotate()做水平翻轉。
  3. 計算好側邊收合及右邊收合的尺寸,就可以無縫接軌的觸發移動。
  4. 右邊內容欄會因為收合導致內容被切掉,因為使用overflow:hidden所導致,或許有更好的方法可以自適應內容。
  5. 內容欄位僅練習圖片排版,並在RWD時全部直向排列,避免圖片壓縮。
  6. footer則是完全套用header的樣式,調整背景色及logo的顯示,再將©限定小於768px後才顯示置中。
  7. 動畫都是利用.active的方式套入toggleClass後觸發效果,是不是有更好的命名方式才能好維護呢。
  8. 持續練習用文字取代圖片,因為一個網頁只有一個h1而又屬logo最重要。
  9. footerlogo隱藏起來使用width:0,若使用display:none則會失去footer的高度。
  10. font-awesome可以直接增加class=”fa-2x,3x…”改變大小。

刻意練習

Practice(200811 Day 19)

首次練習

Hex_Flex時光屋_3_雙欄選單設計
Hex_Flex時光屋_4_表頭表尾設計


2020 iT邦幫忙鐵人賽 Day19 網頁前端-刻意練習(Flex時光屋#1)


上一篇
Day18 網頁前端-刻意練習(履歷表#3)
下一篇
Day20 網頁前端-刻意練習(Flex時光屋#2)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言