在现代 Web 开发中，卡片式 UI 成为了设计师和开发者经常使用的一种组件，特别是在 Material Design 风格下。卡片式 UI 可以非常简单地将信息结构化，并为用户提供视觉上的指导。在本文中，我们将介绍如何在 Material Design 风格下实现卡片式 UI，以及如何使用 CSS 和 HTML 来定义和布局卡片。
Material Design 风格简介
Google Material Design 是一种设计语言，它主要用于移动和 Web 应用程序的 UI 和 UX 设计。它的特点是平面设计、鲜艳的色彩和大量使用阴影效果。Material Design 风格下的卡片式 UI 组件是一个典型的例子，它具有圆角、阴影和深色背景的特点。
实现卡片式 UI 的关键 CSS 属性
在 Material Design 风格下实现卡片式 UI 最重要的三个 CSS 属性是：
border-radius：这个属性可以定义元素的圆角。box-shadow：这个属性可以定义元素的阴影，可以使用多个阴影定义。background-color：这个属性可以定义元素的背景色。
下面是一个示例 CSS 样式，通过这些属性来定义卡片式 UI。
.card {
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
background-color: #fff;
}我们可以看到，这里定义了一个名为 .card 的 CSS 类，其中 border-radius 属性设置为 2px，它可以定义卡片的圆角。box-shadow 属性定义了一个黑色的阴影，这个阴影有两个像素的宽度，四个像素的模糊半径，并且透明度设置为 0.25。最后，background-color 属性定义了一个白色的背景。
编写 HTML 代码
下面是一个示例 HTML 代码片段，它展示了如何将上面定义的 CSS 样式应用到 HTML 中。
<div class="card"> <h2>这是一张卡片</h2> <p>这里是一些内容</p> </div>
我们可以看到，这里定义了一个 div 元素，并将其类名设置为 card。div 元素内部包含了一个 h2 元素和一个 p 元素，这里只是作为示例使用，并可以通过 CSS 样式控制其外观。
布局卡片式 UI
卡片式 UI 虽然简单，但布局却并不容易。我们通常需要根据页面需求来设置不同的布局。下面是一些可以参考的布局建议：
水平布局
<div class="card-container"> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div>
对于卡片式 UI，水平布局是非常流行的，可以将多个卡片放在一行内。可以通过以下样式来实现水平布局：
.card-container {
display: flex;
justify-content: space-between;
}垂直布局
<div class="card-container"> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div>
对于垂直布局，一种常见的布局是将多个卡片放在一个容器里，并让它们垂直排列。可以通过以下样式来实现垂直布局：
.card-container {
display: flex;
flex-direction: column;
}网格布局
在某些情况下，我们需要将卡片拼成一个网格布局，这可以通过以下样式来实现：
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}这会创建一个包含三列的网格布局，并在各个卡片之间留出 20 像素的空隙。
结语
卡片式 UI 组件是一个非常实用的组件，可以帮助我们更好地组织信息，并使页面具有美观的外观。在本文中，我们已经介绍了如何在 Material Design 风格下实现卡片式 UI，并提供了一些有关布局和 HTML/CSS 样式的建议和示例。希望这篇文章可以帮助读者更好地使用卡片式 UI。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d02616e46428fe9eccd61b