如何利用 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>

更新於: 08-12-2023

296 次瀏覽

開啟你的職業生涯之旅

透過完成課程獲得認證

開始
廣告