如何利用 CSS 建立個人資料卡片?
在“團隊”頁面或作者頁面下,你一定看到過員工或作者的個人資料卡片。這種個人資料卡片包括個人資料圖片、姓名和個人資料。還可以建立一個按鈕,允許使用者進行聯絡。在大多數情況下,這種按鈕是可選的。讓我們看看如何利用 CSS 建立個人資料卡片。
設定個人資料卡片的 div
設定一個父級 div 用於卡片。首先,設定個人資料圖片,然後是姓名、職位和位置。最後,使用 <button> 元素設定一個按鈕 −
<div class="profileCard"> <img src="https://tutorialspoint.tw/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt="Amit" style="width:100%" /> <h1>Amit Diwan</h1> <p class="Designation">Entrepreneur</p> <p>Delhi, India</p> <p><button>Contact</button></p> </div>
設計卡片
利用 max-width 屬性設定個人資料卡片的最大寬度。還設定了盒陰影。卡片文字居中 −
profileCard { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: auto; text-align: center; font-family: arial; background-color: rgb(190, 224, 224); }
卡片職位
個人資料圖片下方的職位應採用不同的風格,以便顯得吸引人。使用 font-weight 屬性設定字型樣式 −
.Designation { color: rgb(26, 0, 51); font-weight: bold; font-size: 18px; }
在卡片上顯示按鈕
display 屬性與 inline-block 值一起使用,以在個人資料卡片上顯示按鈕。透過這種方式,使用 cursor 屬性將游標更改為指標,使其看起來像可點選的連結 −
button { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: rgb(23, 31, 102); text-align: center; cursor: pointer; width: 100%; font-size: 18px; }
示例
要利用 CSS 建立個人資料卡片,程式碼如下 −
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .profileCard { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: auto; text-align: center; font-family: arial; background-color: rgb(190, 224, 224); } .Designation { color: rgb(26, 0, 51); font-weight: bold; font-size: 18px; } button { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: rgb(23, 31, 102); text-align: center; cursor: pointer; width: 100%; font-size: 18px; } button:hover, a:hover { opacity: 0.7; } </style> </head> <body> <h2 style="text-align:center">User Profile Card</h2> <div class="profileCard"> <img src="https://tutorialspoint.tw/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt="Amit" style="width:100%" /> <h1>Amit Diwan</h1> <p class="Designation">Entrepreneur</p> <p>Delhi, India</p> <p><button>Contact</button></p> </div> </body> </html>
廣告