数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 编程语言
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何用 CSS 创建“卡片”?
在网页上，我们可以轻松创建一张卡片，就像你可能在团队页面上看到的那样。员工姓名和职称会在缩略图中显示。使用 CSS，我们可以轻松创建一张卡片，还可以使用 :hover 选择器设置悬停样式。
设置卡片图像
<img> 元素用于设置卡片的图像。将其放在一个 div 中 −
<div class="card">
<img src="https://tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg">
<div class="designation">
<h3>Amit Diwan</h3>
<p>Founder</p>
</div>
</div>
设置卡片标题和文本
在上述 <div> 下，创建另一个 <div> 来设置卡片标题和文本 −
<div class="Designation"> <h3>Amit Diwan</h3> <p>Founder</p> </div>
设置卡片样式
我们将上述为卡片设置的 div 设置样式，使其看起来更专业。为此，我们使用了 box-shadow 属性。另外还设置 max-width 来设置精确的宽度 −
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
width: 40%;
max-width: 300px;
background-color: rgb(56, 185, 185);
}
鼠标悬停
将鼠标悬停在卡片上时，会设置一个略有不同的阴影样式 −
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
设置卡片标题和文本样式
我们还设置了卡片标题和文本的样式，使其看起来更专业 −
.designation {
padding: 2px 16px;
background-color: rgb(107, 43, 167);
color:white;
}
示例
要使用 CSS 创建卡片，代码如下 −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin:20px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
width: 40%;
max-width: 300px;
background-color: rgb(56, 185, 185);
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.designation {
padding: 2px 16px;
background-color: rgb(107, 43, 167);
color:white;
}
.card img{
width: 288px;
height: 250px;
}
</style>
</head>
<body>
<h1>Card Example</h1>
<div class="card">
<img src="https://tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg">
<div class="designation">
<h3>Amit Diwan</h3>
<p>Founder</p>
</div>
</div>
</body>
</html>
更新于: 2023-11-17
303 次浏览
广告