iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
自我挑戰組

大二萌新的學習紀錄系列 第 2

Day 2 : HTML - 給我去刻個網站!之 我幹了件蠢事

事情是這樣的
大一下學期時,學長丟了一個網站
叫我一樣畫葫蘆刻出來
只要版面配置相像就好,圖片、功能不用一致

當時的我只會HTML + CSS的基礎 (真的超基礎的那種)
然後學校的老師剛好教到CSS 的position (相對定位(relative)、絕對定位(absolute)、…等)
沒錯…就是你想的那樣,我用了position來刻網站
再用margin、padding…等調位置
下場可想而知慘到不行

原網站長的如下圖所示
https://ithelp.ithome.com.tw/upload/images/20210916/20141088tIwaYk81Ao.png

我用position刻的 (而且還沒刻完)
https://ithelp.ithome.com.tw/upload/images/20210916/20141088a6e4kdewiT.png

嗯? 看起來挺相似的
但只要我調整網頁縮放比例
https://ithelp.ithome.com.tw/upload/images/20210916/20141088iKObWaCPzI.png

哇勒,整個頁首跑掉
完全沒有響應式網頁阿!!!

之後我在網路上查到CSS Flex這個好東西
再看了看我的程式碼,完全不知從何改起
於是我就打掉重練,用Flex的方式刻
成果看起來就好很多了,排版也相對方便
https://ithelp.ithome.com.tw/upload/images/20210916/201410886QkjlDHXZv.png

調整縮放比例也不會讓頁首跑掉了
https://ithelp.ithome.com.tw/upload/images/20210916/20141088zsDW1OkBQy.png

以上是我所幹的蠢事
好險最後有重刻,不然學長應該會很無言

現今網頁大多是用Flex和grid設計的 (在兩者尚未出現前是float、table …等)
這兩者對於設計響應式網頁來說是非常好用的

position 是用來定位元素,一旦定位後就不會隨著網頁縮放而改變位置
所以它非常不適合拿來設計網頁
僅適合將元素「固定」在你想放的地方
要切記!!!!!!
希望不要有人和我犯下一樣的蠢事 (也不會有


上一篇
Day 1 : 前言+本系列會使用到的東西(vscode、xampp、virtualbox、ubuntu、python安裝說明)
下一篇
Day 3 : HTML - 快速打出HTML的代碼,超好用的Emmet語法!
系列文
大二萌新的學習紀錄30

尚未有邦友留言

立即登入留言