把 hsck.css 作为项目形状表名称时，，，，，，，，能够按组件归整常用规定，，，，，，，，让正文排版、卡片、按钮、分页和表格各有明确的视觉职责。。。。。。下面盘点 8 类适合收进统一份形状表的成效，，，，，，，，每一类都附有具体 CSS 片段和合用场景，，，，，，，，方便按界面结构组合使用。。。。。。

1. 全局基础形状：统一间距与文字

基础规定适合放在 hsck.css 开头，，，，，，，，先统一盒模型、浏览器默认边距和正文行高。。。。。。这样卡片宽度、按钮尺寸等后续组件不容易被默认形状挤压，，，，，，，，标题与段落也能维持不变的阅读节拍。。。。。。

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: #263445;
  font: 16px/1.6 Arial, sans-serif;
}

这里使用 16px 正文字号和 1.6 倍行高；；；；；；；；若界面重要展示密集数据，，，，，，，，可把行高调到 1.45 左右，，，，，，，，但建议保留足够的段落间距。。。。。。

2. 阅读容器：节造正文宽度

正文栏过宽时，，，，，，，，长段落容易读串行；；；；；；；；过窄则会浪费桌面空间。。。。。。容器规定用最大宽度约束文章正文，，，，，，，，并通过左右自动表边距居钟祝。。。。。窄屏下再收紧内边距，，，，，，，，预防文字贴边。。。。。。

.hsck-container {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
}
.hsck-section {
  padding-block: 24px;
}

1120px 适合作为常见桌面阅读宽度，，，，，，，，32px 的总预留空间则为幼屏左右各留出 16px。。。。。。商品列表、文章正文和组件预览区都能够复用这组容器。。。。。。

3. 分组卡片：凸起标题与操作

卡片适合承载标题、简短注明和操作入口。。。。。。淡色边框掌管分辨天堑，，，，，，，，圆角和轻阴影增长档次；；；；；；；；但不宜同时使用过沉的阴影与高鼓和底色，，，，，，，，不然多张卡片并排时容易显得拥挤。。。。。。

.hsck-card {
  padding: 20px;
  border: 1px solid #e3e9f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(24, 45, 68, .06);
}
.hsck-card h3 {
  margin: 0 0 10px;
}

卡片标题保留明显的下边距，，，，，，，，注明文字就不会与标题粘连。。。。。。必要展示多条商品或工作纪录时，，，，，，，，可用网格分列卡片，，，，，，，，再通过容器宽度节造每行数量。。。。。。

4. 操作按钮：分辨重要与次要作为

按钮形状的沉点是让重要作为足够能干，，，，，，，，同时为次级操作留出轻量的视觉地位。。。。。。统一高度、圆角和内边距后，，，，，，，，即便按钮文字长度分歧，，，，，，，，也能维持靠近的触控面积。。。。。。

.hsck-button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #2869d8;
  color: #fff;
  font-weight: 600;
}
.hsck-button--light {
  background: #edf3fc;
  color: #2459a8;
}

蓝色按钮可承担“提交订单”“保留设置”等重要操作，，，，，，，，淡色版本用于返回、取缔等次级作为。。。。。。按钮文字应直接描述点击后的了局，，，，，，，，不能只靠色彩通报用处。。。。。。

5. 立体分页：让当前页更能干

分页组件适合长列表或数据表格。。。。。。轻微的下边缘和按下反馈能够形成简洁的立体感，，，，，，，，当前页则用实色凸起。。。。。。相较于显著的旋转和厚沉阴影，，，，，，，，这种处置更容易与通例卡片搭配。。。。。。

.hsck-page {
  display: inline-block;
  min-width: 36px;
  padding: 7px 10px;
  border-radius: 6px;
  background: #f0f3f7;
  box-shadow: 0 3px 0 #d7dee8;
  text-align: center;
}
.hsck-page.is-current {
  background: #2869d8;
  color: #fff;
  box-shadow: 0 3px 0 #174b9e;
}

当前页象征使用 is-current，，，，，，，，切换页码时只需移动状态类。。。。。。页码、“上一页”和“下一页”按钮维持一样高度，，，，，，，，整行看起来会更整齐。。。。。。

6. 数据表格：明确表头与行分隔

表格适合出现商品型号、库存状态和类别等必要横向对照的字段。。。。。。淡色表头援手读者鉴别列名，，，，，，，，细分隔线则让相邻数据行维持清澈；；；；；；；；单元格留白不宜过幼，，，，，，，，以免文字堆在一路。。。。。。

.hsck-table {
  width: 100%;
  border-collapse: collapse;
}
.hsck-table th,
.hsck-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e4e9ef;
  text-align: left;
}
.hsck-table th {
  background: #f4f7fa;
  font-weight: 700;
}

字段较多时，，，，，，，，可优先压缩非沉点列的宽度，，，，，，，，而不是把所有字号都缩幼。。。。。。单元格里的名称或备注较长时能够换行，，，，，，，，让型号、价值和库存数值依然明显可读。。。。。。

7. 表格加载遮罩：提醒期待状态

数据尚未载入实现时，，，，，，，，半通明遮罩能临时覆盖表格区域，，，，，，，，并在中央显示状态文字，，，，，，，，预防读者误以为表格为空。。。。。。遮罩应相对于表格表层定位，，，，，，，，而不是挡住整张界面。。。。。。

.hsck-table-wrap {
  position: relative;
}
.hsck-table-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .82);
  color: #526174;
}

遮罩覆盖领域由表层容器决定，，，，，，，，状态文字只需与淡色布景维持足够对比。。。。。。数据载入实现后移除对应状态元素，，，，，，，，表格便能复原正常浏览。。。。。。

8. 窄屏适配：调整卡片与表格布局

桌面布局缩得手机宽度时，，，，，，，，卡片列数和表格出现方式必要相应变动。。。。。。以下规定将多列卡片改为单列，，，，，，，，并让表格区域支持横向滚动，，，，，，，，预防商品名称、价值和状态被挤压得难以辨认。。。。。。

.hsck-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 700px) {
  .hsck-grid {
    grid-template-columns: 1fr;
  }
  .hsck-table-wrap {
    overflow-x: auto;
  }
}

断点设为 700px，，，，，，，，可凭据卡片现实宽度调整；；；；；；；；若表格列较少，，，，，，，，也能够让单元格换行，，，，，，，，而不是强造横向滚动。。。。。。

组合建议：以上 8 类规定别离覆盖基础排版、阅读容器、分组卡片、操作按钮、分页、数据表格、加载遮罩和窄屏适配，，，，，，，，不再另计一类。。。。。。商品列表可组合基础形状、容器与卡片；；；；；；；；库存治理界面可参与表格、加载遮罩和分页；；；；；；；；必要两全手机浏览时，，，，，，，，再参与窄屏规定。。。。。。将这些组件集中整顿在 hsck.css 中，，，，，，，，并按 hsck-组件名 统一定名，，，，，，，，后续新增形状时会更容易查找和守护。。。。。。