iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

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

Day2 網頁前端-刻意練習(相對絕對定位)

Day2 金魚 相對絕對定位

https://ithelp.ithome.com.tw/upload/images/20200902/20129161kZ53oZB9DL.jpg
https://ithelp.ithome.com.tw/upload/images/20200902/20129161qgqqPdUif2.png

簡單小語

定位的重要性不可言喻,一招可以有各種變化,釐清relative,absolute,fixed之間的差異及使用時機,套句Amos老師警言"不是absolute就一定要用relative",清楚知道各種定位所參照的對象,即便再次刻意練習還是會有出錯,比如一開始將ad寫成position: absolute發現居然沒有置中(不會跟著滑鼠移動),才發現應該使用position: fixed才會一直在畫面中間,刻意練習算是又複習到蓋版廣告的應用了。
老師說:fixed 是對視窗,不是對 body。

筆記分享

  1. 使用 wrap+ margin: 0 auto可以讓內容水平置中。
  2. 共同的 CSS可以一同設定避免過長 ex.content。
  3. 重複性的物件建議使用ul/li結構。
  4. justify-content:space-between左右對齊邊框分配其餘空間於物件中。
  5. ad需要蓋版廣告,因此要使用position: fixed讓他浮起來(預設會去定位body),使用top, bottom,right, left = 0margin: auto後,即可定位於畫面中央。
  6. btn使用position: absolute讓他定位在ad上並移動位置放置右上角。
  7. btn設定整體外觀,使用line-height = height對單行的物件垂直置中。
  8. a設定文字外觀,text-decoration: none,幾乎都會設定在a上。
  9. a:hover設定滑鼠觸摸的效果,可以增加使用者體驗。
  10. img使用vertical-align: middle可以消除圖片對齊的空隙。

刻意練習

Practice(200713 Day 2)

首次練習

Practice(200513_相對絕對定位)


2020 iT邦幫忙鐵人賽 Day2 網頁前端-刻意練習(相對絕對定位)


上一篇
Day1 網頁前端-刻意練習
下一篇
Day3 網頁前端-刻意練習(稀飯版)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

5
CSScoke
iT邦新手 3 級 ‧ 2020-09-02 16:40:56

小小的提醒一下,fixed 是對視窗,不是對 body 喔

TerryYu iT邦新手 5 級 ‧ 2020-09-02 17:09:39 檢舉

挖靠
老師居然來留言(淚ing)
"fixed 是對視窗,不是對 body 喔"
明白了,又是恍然大悟

老師我在等您開賽呢

CSScoke iT邦新手 3 級 ‧ 2020-09-21 00:46:52 檢舉

/images/emoticon/emoticon33.gif

我要留言

立即登入留言