数据结构
网络
关系型数据库管理系统 (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.com/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.com/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 次浏览
广告