Primer CSS Avatars 基本示例

Primer CSS是一个由GitHub开发的CSS框架，用于构建简单、响应式和现代化的Web应用程序。

GitHub Primer CSS框架提供了一系列头像（avatars）的样式，让我们可以轻松地在网站中使用头像。在本示例中，我们将介绍如何使用GitHub Primer CSS框架创建一些基本的头像样式。

准备工作

在开始之前，我们需要在你的HTML文档中引入GitHub Primer CSS组件库。你可以从GitHub Primer CSS官方网站下载并引入，或通过CDN引入。

<link rel="stylesheet" href="https://unpkg.com/@primer/css@2.8.1/build.css">

基本示例

在GitHub Primer CSS框架中，头像样式是由 .avatar 类来控制的。下面是一个基本的头像示例：

<img class="avatar" src="https://avatars.githubusercontent.com/u/2918581?s=40&v=4" alt="Avatar">

该代码段将显示一个40像素大小的GitHub用户2918581的头像。如果你想自定义头像的大小，只需调整图像大小即可。如下所示：

<img class="avatar" src="https://avatars.githubusercontent.com/u/2918581?s=100&v=4" alt="Avatar">

这将显示一个100像素大小的GitHub用户2918581的头像。

不同形状的头像

Primer CSS还提供了其他不同形状的头像样式。请参考以下代码。

圆形头像

<img class="avatar avatar-small" src="https://avatars.githubusercontent.com/u/2918581?s=40&v=4" alt="Avatar">

该代码段将显示一个直径为40像素的圆形GitHub用户2918581的头像。

方形头像

<img class="avatar avatar-small square" src="https://avatars.githubusercontent.com/u/2918581?s=40&v=4" alt="Avatar">

该代码段将显示一个40像素大小的GitHub用户2918581的方形头像。请注意，此头像需要使用 .square 类。

头像堆叠

Primer CSS还可以显示一组头像并将它们堆叠在一起。

<div class="avatar-stack">
  <img class="avatar avatar-small" src="https://avatars.githubusercontent.com/u/2918581?s=40&v=4" alt="Avatar">
  <img class="avatar avatar-small" src="https://avatars.githubusercontent.com/u/2918581?s=40&v=4" alt="Avatar">
  <img class="avatar avatar-small" src="https://avatars.githubusercontent.com/u/2918581?s=40&v=4" alt="Avatar">
  <img class="avatar avatar-small" src="https://avatars.githubusercontent.com/u/2918581?s=40&v=4" alt="Avatar">
</div>

该代码段将显示具有4个用户头像的堆叠。这是通过使用 .avatar-stack 类来实现的。

结论

现在，你已经掌握了如何使用GitHub Primer CSS框架创建头像样式的基础知识。你可以尝试了解并使用其他其他GitHub Primer CSS框架提供的样式来搭建漂亮的Web应用程序！