---
# System prepended metadata

title: '金魚都能懂的網頁切版 練習2:製作一個互動圖文卡片'
tags: [切版]

---

# 金魚都能懂的網頁切版 練習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)

接下來
- [ ] 如何置中
- [ ] 如何處理背景色透過去的問題
