---
# System prepended metadata

title: '金魚都能懂的網頁切版 練習3:人員介紹卡片'
tags: [切版]

---

# 金魚都能懂的網頁切版 練習3:人員介紹卡片
###### tags: `切版`

學習資源: 
1. [金魚都能懂的網頁切版 : 人員介紹卡片](https://www.youtube.com/watch?v=2Qs0EuqJIYA&ab_channel=CSScoke)
2. [VS Code自訂程式碼](https://pjchender.blogspot.com/2017/04/vs-code-snippet.html)

![](https://i.imgur.com/rhkW7VJ.png)

首先要建構一個三個欄位的架構，這裡有個小訣竅，透過.item*3就可以跑出三個欄位
![](https://i.imgur.com/JrawkOY.png)
![](https://i.imgur.com/tYgHkCY.png)

產生三張假圖，並把規格調成300*300
![](https://i.imgur.com/EM7fOzR.png)

把文字打好來~
![](https://i.imgur.com/N3a4onG.png)

做好網頁的title跟reset的設定
![](https://i.imgur.com/CiooqhP.png)

用wrap來修改排列
![](https://i.imgur.com/FeUMiPU.png)

接著再做一些畫面圖片的調整
![](https://i.imgur.com/q650U71.png)

加上文字底線
![](https://i.imgur.com/oGjuHLb.png)

再加一點文字間距
![](https://i.imgur.com/u1B2zIm.png)

在p設定段落的行高為1.5px
![](https://i.imgur.com/3LfxToq.png)

補上字體
![](https://i.imgur.com/vod26nm.png)

把字體的粗細調整一下
![](https://i.imgur.com/0n1sk6Q.png)

讓圖片和文字可以置中呈現
![](https://i.imgur.com/Qpg5GbI.png)

設定好整體背景和文字背景顏色，並且加個淺灰邊框，且把原有的寬度-2，做為調整
![](https://i.imgur.com/uTwrOqf.png)
![](https://i.imgur.com/7eiPg6Q.png)
![](https://i.imgur.com/6HkY5Qn.png)

可以透過text-align:center把文字置中
![](https://i.imgur.com/4ToHZaA.png)

**如何切出三角形?**
![](https://i.imgur.com/iTclGuf.png)

讓三角形中央貼齊
![](https://i.imgur.com/NQOJeI7.png)

**如何做出三角形的切紋?**
![](https://i.imgur.com/sK3DnRl.png)

**如何做出互動效果**
使用hover
![](https://i.imgur.com/hXYG3w1.png)

確認移動狀態
![](https://i.imgur.com/sLlwjc4.png)

做出動畫效果
![](https://i.imgur.com/DfFsXMR.jpg)

做出文字漸層色的設定效果
![](https://i.imgur.com/S7wohJJ.png)

調配一下顏色
![](https://i.imgur.com/w9JIBGd.png)

調配一下文字色彩，把它變成白色
![](https://i.imgur.com/WXmmcGw.png)

把h2跟p的transition補上去，就可以做出動畫效果，太慢也可以調整秒數成.25秒
![](https://i.imgur.com/4ofyazc.png)

