使用material3布局

Material3 是一个 Google 设计的 Material Design 的最新版本，它提供了一套全新的 UI 组件库，可以帮助我们轻松创建现代化的用户界面。在使用 Material3 布局时，我们可以使用以下步骤：

1. 导入 Material3 组件库：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/@material/mwc-button@9.0.0/mwc-button.css" />
<link rel="stylesheet" href="https://unpkg.com/@material/mwc-card@9.0.0/mwc-card.css" />

2. 使用 Material3 布局：

<mwc-card>
  <div class="card-content">
    <h1 class="title">Hello Material3!</h1>
    <p class="subtitle">This is a demo of Material3 layout.</p>
    <mwc-button raised label="Click me"></mwc-button>
  </div>
</mwc-card>

在这个示例中，我们使用了 `mwc-card` 组件来创建一个卡片布局，其中包含一个标题、一个副标题和一个按钮。通过使用 Material3 组件库，我们可以轻松创建现代化的用户界面。