Primer CSS Blue Box Header 主题(1)

📌 相关文章

📜 Primer CSS Blue Box Header 主题(1)

📅 最后修改于: 2023-12-03 15:33:47.561000 🧑 作者: Mango

Primer CSS 是一套开源的 CSS 框架，由 GitHub 开发并维护。Blue Box Header 主题是 Primer CSS 中的一款主题，它可以让你快速创建一个具有蓝色带有圆角边框的标题栏。

将以下代码放在你的 HTML 文件的 <head> 标签中：

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

在你的 HTML 文件中创建一个 <div> 元素，并添加 Box 和 Box-header 类，示例代码如下：

<div class="Box">
  <div class="Box-header">这里是标题</div>
  <div class="Box-body">这里是内容</div>
</div>

你可以修改 Box-header 的样式来调整标题栏的颜色、边框等，例如：

.Box-header {
  padding: 16px;
  background-color: #0366d6;
  color: #fff;
  border-radius: 5px 5px 0 0;
  border: none;
}

以下是 Blue Box Header 主题的效果预览：

这里是标题

这里是内容

Primer CSS Blue Box Header 主题是一个轻量级、实用的 CSS 框架，它可以帮助你快速创建美观的标题栏。同时，它也具备一定的定制性，可以让你根据自己的需求进行样式调整。如果你正在寻找一个简单易用的 CSS 框架，那么 Primer CSS 绝对是一个不错的选择。