练习一个卡片 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif; /* 字体类型 */
        display: flex; /* 设置为弹性盒子*/
        justify-content: center; /* 设置弹性盒子主轴居中对齐 */
        align-items: center; /* 设置弹性盒子项目居中对齐 */
        min-height: 100vh; /* 设置最小高度为整个视口的高度 */
        margin: 0;
        background-color: #f4f4f4;
      }
      .card {
        width: 295px;
        background-color: #fff;
        border-radius: 10px; /* 设置圆角10像素 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置阴影 */
        overflow: hidden; /* 设置溢出后隐藏 */
        transition: transform 0.3s ease-in-out; /* 设置过渡 */
      }
      .card img {
        width: 100%;
        height: auto;
        display: block;
      }
      .card h2 {
        margin: 15px;
        font-size: 1.5em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .card p {
        margin: 15px;
        font-size: 0.9em;
        color: #666;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .card:hover {
        transform: translateY(-5px); /* 鼠标进入后开始过渡 */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <div class="card">
      <img src="https://picsum.photos/id/107/300/200" alt="示例图片" />
      <h2>卡片标题卡片标题卡片标题卡片标题卡片标题</h2>
      <p>
        这是一段关于卡片的简短描述。在这里你可以详细说明卡片的内容。这是一段关于卡片的简短描述。在这里你可以详细说明卡片的内容。这是一段关于卡片的简短描述。在这里你可以详细说明卡片的内容。这是一段关于卡片的简短描述。在这里你可以详细说明卡片的内容。这是一段关于卡片的简短描述。在这里你可以详细说明卡片的内容。
      </p>
    </div>
  </body>
</html>

 

posted @ 2026-01-22 16:19  风铃摇曳  阅读(1)  评论(0)    收藏  举报