用于html
创建一个信用卡样式的卡片:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.credit-card {
width: 350px;
height: 200px;
background-color: #337ab7;
color: white;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.credit-card .card-number {
font-size: 20px;
}
.credit-card .card-holder {
text-transform: uppercase;
font-size: 16px;
}
.credit-card .expiry-date {
font-size: 16px;
}
</style>
</head>
<body>
<div class='credit-card'>
<div class='card-number'>1234 5678 9101 1121</div>
<div class='card-holder'>John Doe</div>
<div class='expiry-date'>Expires: 07/25</div>
</div>
</body>
</html>
```
上面的代码使用 CSS 来定义一个 `.credit-card` 类,用于设置信用卡卡片的样式。其宽度为 350 像素,高度为 200 像素,背景颜色为 `#337ab7`(这是一个蓝色),文字颜色为白色。通过设置 `padding` 和 `box-sizing` 可以确保内容适当地居中显示。`border-radius` 属性用于设置边框的圆角。
在 `.credit-card` 类的内部,还有三个分别具有不同样式的子类,分别对应信用卡号码、持卡人和到期日期。