iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
自我挑戰組

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

Day9 網頁前端-刻意練習(JQ選單)

Day9 金魚 JQ選單

https://ithelp.ithome.com.tw/upload/images/20200909/20129161yveN8lvb0v.jpg
https://ithelp.ithome.com.tw/upload/images/20200909/20129161OO2zoHAHPE.png

簡單小語

之前練習往往都是在header上會花些時間,這次的刻意練習就選JQ選單來加深印象,雖然樣板差不多差異在其特效及RWD差異,練習後對於li中包a的用法有了更進一步的想法,display: block取決於要哪一個部分執行,一次給自己練習了五種不同的header方式,雖是自己天馬行空想像,未來實際工作可能不會這麼做,當作給自己思考練習的機會,CSS看起來髒髒的沒有用組合式或是群組式方式是為了未來若有需求,僅需查看該header段落即可,所以才會又臭又長,其實很多地方式能夠簡化合併的,下次來做個OffCavans選單,刻意練習這種RWD會哭哭的硬漢練習。

筆記分享

  1. 注意imgmenu的相對位置再使用flex排版,加深觀念。
  2. 標題logo通常使用文字取代圖片(.logo a),加強SEO
  3. 若是要用fixed選單(max-width: 1024px),在960px以上時需固定width: 1024px,避免破版。
  4. overflow: hidden使用在header上可以將menu選單移至左右方並隱藏起來。
  5. 選單樣式模板多種,此練習自認初階,需要熟悉用法並嘗試新增多層式選單。
  6. 可以使用::before, ::after去新增li a中的樣式,增添多樣性。
  7. 使用animate套件提升點擊到a的使用者體驗。
  8. 點選btn時改變icon方向性,提升使用者體驗(目前用transform方式,應該有更容易的方式變化)。
  9. font-awesome可以使用fa-3x, 4x, 5x方式更改大小。
  10. 選單配色可上網搜尋配色網站進行調配,避免使用者有礙觀瞻。

刻意練習

Practice(200729 Day 9)

首次練習

Practice(200615_JQ選單)


2020 iT邦幫忙鐵人賽 Day9 網頁前端-刻意練習(JQ選單)


上一篇
Day8 網頁前端-刻意練習(簡易表格)
下一篇
Day10 網頁前端-刻意練習(文字排版)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言