資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究如何利用 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 次瀏覽
廣告