把 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-组件名 统一命名，后续新增样式时会更容易查找和维护。
