hsck.css样式合集盘点：8类常见页面组件与视觉效果

整理 hsck.css 时，可以把常见界面样式按组件归类：统一按钮、卡片、表格与提示框的视觉规则，后续维护时也更容易找到对应位置。下面盘点 8 组可直接放入 hsck.css 的 CSS 样式，选择器统一使用 .hsck- 前缀，减少与项目现有类名冲突。示例使用常见的浅色界面配色，可按站点主题调整颜色和圆角。

按钮：主操作与次要操作

按钮以蓝色主按钮和浅灰次按钮区分操作优先级。统一设置内边距、圆角和过渡效果后，同一组按钮在表单、弹窗和工具栏中更协调；悬停时颜色略深，键盘聚焦时也保留清晰的轮廓。

.hsck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 1px solid #2563eb;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.hsck-btn:hover { background: #1d4ed8; }
.hsck-btn:focus-visible { outline: 3px solid #bfdbfe; }
.hsck-btn--muted { border-color: #d1d5db; background: #f3f4f6; color: #374151; }

卡片：分隔信息区块

卡片适合承载摘要、商品信息或列表中的单条记录。浅色描边用于界定内容范围，柔和阴影提供轻微层次；悬停时只提升阴影，不大幅移动元素，避免卡片密集排列时产生跳动感。

.hsck-card {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
  transition: box-shadow .2s;
}
.hsck-card:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
}
.hsck-card__title { margin: 0 0 10px; color: #111827; font-size: 18px; }
.hsck-card__body { color: #4b5563; line-height: 1.7; }

标签：标出状态与分类

小标签常用于显示分类、进度或内容状态。基础样式采用紧凑的胶囊形外观，再通过修饰类表达不同语义。标签文字尽量简短，颜色与文字保持足够反差，避免只用颜色传递重要状态。

.hsck-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  line-height: 1.6;
}
.hsck-tag--success { background: #ecfdf5; color: #047857; }
.hsck-tag--warning { background: #fffbeb; color: #b45309; }
.hsck-tag--neutral { background: #f3f4f6; color: #4b5563; }

表格：清晰呈现行列数据

表格通过浅色表头、行间分隔线和交替底色改善浏览体验。外层容器处理窄屏溢出，表格本身保持最小宽度，避免列内容被挤成难以阅读的窄条。用于数据较多的区域时，可让用户横向滚动查看完整字段。

.hsck-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
.hsck-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.hsck-table th, .hsck-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}
.hsck-table th { background: #f9fafb; color: #374151; font-weight: 600; }
.hsck-table tbody tr:nth-child(even) { background: #fcfcfd; }

表单：统一输入框状态

输入框需要同时覆盖默认、聚焦和禁用状态。统一高度与边框颜色，可以让文本框、选择框等控件更协调；聚焦时采用蓝色边框和外环提示当前输入位置，禁用状态则降低对比度并改变鼠标指针。

.hsck-field {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #111827;
  font: inherit;
}
.hsck-field:focus { border-color: #2563eb; outline: 3px solid #dbeafe; }
.hsck-field:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }

提示框：突出反馈信息

提示框适合展示操作成功、注意事项或错误原因。用边框和浅底色配合标题、正文，可以让反馈区域从普通段落中区分出来；不同状态沿用同一结构，仅替换颜色，便于维护和复用。

.hsck-alert {
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e3a8a;
  line-height: 1.6;
}
.hsck-alert__title { margin: 0 0 4px; font-weight: 700; }
.hsck-alert--success { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
.hsck-alert--error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

分页：标记当前浏览位置

分页控件由页码、前后切换项组成。固定按钮尺寸便于点击，当前页使用强调色，其余页维持中性外观；禁用项降低透明度并关闭点击手势，避免用户误以为还能继续翻页。

.hsck-pagination { display: flex; flex-wrap: wrap; gap: 6px; }
.hsck-page {
  min-width: 36px;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  text-align: center;
}
.hsck-page.is-active { border-color: #2563eb; background: #2563eb; color: #fff; }
.hsck-page:disabled { opacity: .45; cursor: not-allowed; }

导航栏：区分当前栏目

导航项保持相同的间距和点击区域，默认文字采用深灰色，悬停与当前栏目统一使用主题色。底部边框用于标记选中项，不依赖字体加粗制造位置变化，因此切换栏目时布局更稳定。

.hsck-nav { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #e5e7eb; }
.hsck-nav__item {
  padding: 11px 14px;
  border-bottom: 2px solid transparent;
  color: #4b5563;
  text-decoration: none;
}
.hsck-nav__item:hover { color: #1d4ed8; }
.hsck-nav__item.is-current { border-bottom-color: #2563eb; color: #1d4ed8; font-weight: 600; }