Print

html信用卡样式

设计辅导Qq:1052602713


 用于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` 类的内部,还有三个分别具有不同样式的子类,分别对应信用卡号码、持卡人和到期日期。