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