iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

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

Day7 網頁前端-刻意練習(會員登入)

  • 分享至 

  • xImage
  •  

Day7 金魚 會員登入

https://ithelp.ithome.com.tw/upload/images/20200907/20129161T2XtAqQyVj.jpg
https://ithelp.ithome.com.tw/upload/images/20200907/20129161Jr7I5kLqDL.png

簡單小語

會員登入畫面的練習,增加了觸摸效果及使用者體驗,先前看Amos老師教學時以為不難,實作才發現很多觀念不足,例如如何放圖片到整個body且圖片不會失真,細節才是能力的展現,表單部分也加深了labelinput之間的關係,透過刻意練習,真的是讓自己再次思考,如何從無到有的編寫及完成,雖說簡單的畫面,卻也是練習很好的項目,往後真的要加入JavaScript的功能,可以驗證帳號密碼竟且註冊登入透過AJAX串接取的資料,難題重重,一一突破。

*200908加入AJAX表單驗證囉!!!

筆記分享

  1. 使用backdrop-filter: blur(5px),可以讓背景呈現模糊,不會讓透明狀態下看穿後方背景圖。
  2. flex應用處理,水平及垂直置中觀念亦為十分重要,justify-contentalign-items
  3. 利用flex排列方式將font awesome放入input中。
  4. labelfor是為了focus在input中,因此for的值 = input id值(點擊label後focus在input)。
  5. beforeafter真的很實用也很方便,在一些特殊設計及應用上,目前都優先使用。
  6. 只要是a連結所產生的樣式建議都增加hover提升使用者體驗。
  7. media分三類裝置,應用在不同尺寸上所呈現的表單寬度也不相同。
  8. paddingmargin使用方式,釐清推擠或內縮的pixel數目,方可正確了解移動及方向。
  9. 登入表單記得放置“忘記密碼”選項,目前登入表單基本需擁有的樣式。
  10. body也可以套用css樣式,此練習即有使用backgroundflex

刻意練習

Practice(200722 Day 7)

首次練習

Practice(200531_會員登入)


2020 iT邦幫忙鐵人賽 Day7 網頁前端-刻意練習(會員登入)


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

尚未有邦友留言

立即登入留言