Day 2 : HTML - 给我去刻个网站！之 我干了件蠢事

事情是这样的
大一下学期时，学长丢了一个网站
叫我一样画葫芦刻出来
只要版面配置相像就好，图片、功能不用一致

当时的我只会HTML + CSS的基础 (真的超基础的那种)
然後学校的老师刚好教到CSS 的position (相对定位(relative)、绝对定位(absolute)、…等)
没错…就是你想的那样，我用了position来刻网站
再用margin、padding…等调位置
下场可想而知惨到不行

原网站长的如下图所示

我用position刻的 (而且还没刻完)

嗯? 看起来挺相似的
但只要我调整网页缩放比例

哇勒，整个页首跑掉
完全没有响应式网页阿！！！

之後我在网路上查到CSS Flex这个好东西
再看了看我的程序码，完全不知从何改起
於是我就打掉重练，用Flex的方式刻
成果看起来就好很多了，排版也相对方便

调整缩放比例也不会让页首跑掉了

以上是我所干的蠢事
好险最後有重刻，不然学长应该会很无言

现今网页大多是用Flex和grid设计的 (在两者尚未出现前是float、table …等)
这两者对於设计响应式网页来说是非常好用的

position 是用来定位元素，一旦定位後就不会随着网页缩放而改变位置
所以它非常不适合拿来设计网页
仅适合将元素「固定」在你想放的地方
要切记！！！！！！
希望不要有人和我犯下一样的蠢事 (也不会有