引导中的卡片 - HTML

在网页设计中，卡片是一种常见的UI设计元素。它们是通常用于显示相关信息的矩形区域。在多数情况下，卡片用于组织以及展示信息，并提供一个清晰的界面，使得用户能够高效地使用网站。

HTML 创造卡片

创建卡片通常需要使用HTML和CSS。HTML用于创建页面的框架，而CSS则用于设计和样式化卡片。

为了创建一个卡片元素，您需要以下的HTML代码：

<div class="card">
  <img src="image.jpg" alt="Card Image">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p class="card-text">This is an example of card text.</p>
    <a href="#" class="card-link">Card Link</a>
    <a href="#" class="card-link">Another Card Link</a>
  </div>
</div>

HTML 代码解释

• 整个卡片被放在一个 div 元素内，并采用 .card类进行样式化

• 图像（image）标签被用来在卡片上显示图形。记得为 img 元素设置 alt 属性

• 卡片主体（card-body）由标题（card-title）、文本（card-text）和链接（card-link）组成

CSS 样式化卡片

为了使卡片更加引人注目，您可以使用CSS进行样式化。

下面是一些CSS样式，帮助您快速设置卡片内部和外部字体、颜色和背景：

.card {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 300px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card img {
  width: 100%;
  height: auto;
}

.card-body {
  padding: 20px;
}

CSS 代码解释

• 卡片（card）采用Arial字体，具有14像素的字号，并在#fff背景下呈现333字色

• 卡片使用0 4px 8px 0 rgba（0,0,0,0.2）盒模型阴影，并采用0.3s的转换时间

• 当鼠标指针悬停在卡片上时，卡片使用了0 8px 16px 0 rgba（0,0,0,0.2）盒模型阴影

• 图像 image 标签的 width 属性设置为100%，使其可以充分利用卡片空间

• 卡片 body（card-body）使用了20像素的填充（ padding ）增加内容的感官耐受性

结论

卡片是一个非常有用的UI元素，可以用来在网站上展示信息。对于在HTML中创建一个样式化的卡片，您需要使用一些HTML和CSS来创建它，并且通过调整样式值（如字号、颜色和背景）来定制它。