# 金魚都能懂的網頁切版 練習2:製作一個互動圖文卡片 ###### tags: `切版` 1. [Amos Day2 影片連結](https://www.youtube.com/watch?v=IocyLERRdko&feature=emb_logo&ab_channel=CSScoke) 2. [絕對定位教學](https://www.youtube.com/watch?v=JOdZdHnuGmM&ab_channel=CSScoke) ![](https://i.imgur.com/DLMMa5z.png) 先製作出容器，並且運用假圖套件(Lorem Picsum)來製作版面 ![](https://i.imgur.com/awSIRJr.png) 定義好文字 ![](https://i.imgur.com/epUa64P.png) 用CSS Reset和selector讓第一個圖和文字出來 ![](https://i.imgur.com/r8wNdaZ.png) 都市傳說: 子層的物件使用絕對定位以後，就要用相對定位 完全是錯誤的觀念(x) 如何把文字蓋在圖片上面? 透過相對和絕對定位，並且把文字的設定處理一下 ![](https://i.imgur.com/2ZZLs0Q.png) 接著可以去更改文字設定 ![](https://i.imgur.com/ULsJ5ju.png) 透過flex和justify content讓文字置中 ![](https://i.imgur.com/jHYJvgy.png) 字體設定一下，分別在head和css reset的部分進行設定，讓全部的文字都可以長一樣 ![](https://i.imgur.com/aQAQeNa.png) 再透過font-weight來調整字體粗細 ![](https://i.imgur.com/RKyZRua.png) 複製四個div區塊，並且把連結稍微修改一下，並把wrap的display調為`flex` ![](https://i.imgur.com/i6Sff0Z.png) ![](https://i.imgur.com/Qbh1gsS.png) 此時畫面就會是橫的 ![](https://i.imgur.com/0vg8RRP.jpg) 此時，也調個透明程度，把opacity調為0 ![](https://i.imgur.com/EwW0kLN.png) 透過hover，可以做到副層和子層的差別，讓游標去點，就會出現文字 ![](https://i.imgur.com/1lzicg5.png) 透過transition加上opacity，加上秒數，就可以有動畫效果 ![](https://i.imgur.com/0I2tYfi.png) 如何在圖像上加上橫線 ![](https://i.imgur.com/ehEkFMl.png) ![](https://i.imgur.com/U90C15j.jpg) 如何把橫線加上動畫，透過delay的效果 ![](https://i.imgur.com/3uiSEMl.png) 接下來 - [ ] 如何置中 - [ ] 如何處理背景色透過去的問題