98.css：构建复古Windows 98风格UI的设计系统指南

项目概述

98.css是一个专门用于构建Windows 98风格用户界面的CSS设计系统。它通过纯CSS的方式，让开发者能够快速创建出具有90年代末期Windows操作系统经典视觉风格的网页界面。

核心特点

1. 纯CSS实现：不包含任何JavaScript代码，可与任何前端框架配合使用
2. 语义化HTML：严格遵循HTML语义化标准，确保可访问性
3. 轻量级：文件体积小，加载速度快
4. 高度可定制：在保持整体风格的前提下允许样式覆盖

快速开始

CDN引入方式

最简单的方式是通过CDN直接引入：

<link rel="stylesheet" href="https://unpkg.com/98.css">

NPM安装方式

对于使用构建工具的项目：

npm install 98.css

核心组件详解

1. 按钮(Button)

Windows 98风格的按钮具有以下特征：

• 标准尺寸：75px宽 × 23px高
• 凸起的边框效果
• 12px的水平内边距

<button>普通按钮</button>
<button class="default">默认按钮</button>
<button disabled>禁用按钮</button>

状态变化：

• 点击时边框会呈现凹陷效果
• 禁用状态会显示灰色文字
• 焦点状态会有虚线边框

2. 复选框(Checkbox)

使用注意事项：

• 必须配合<label>元素使用
• 标签需放在复选框之后
• 使用for属性关联复选框的id

<div class="field-row">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">选项1</label>
</div>

3. 单选按钮(OptionButton)

实现互斥选择：

• 同一组的单选按钮需共享name属性
• 使用field-row类确保间距一致

<div class="field-row">
  <input id="radio1" type="radio" name="group1">
  <label for="radio1">选项A</label>
</div>
<div class="field-row">
  <input id="radio2" type="radio" name="group1">
  <label for="radio2">选项B</label>
</div>

4. 分组框(GroupBox)

用于组织相关控件：

• 使用<fieldset>元素创建
• 可添加<legend>作为标题

<fieldset>
  <legend>用户信息</legend>
  <!-- 表单控件 -->
</fieldset>

5. 文本框(TextBox)

支持单行和多行输入：

• 单行使用<input type="text">
• 多行使用<textarea>
• 可使用field-row-stacked垂直布局

<div class="field-row-stacked">
  <label for="address">地址</label>
  <textarea id="address" rows="4"></textarea>
</div>

6. 滑动条(Slider)

Windows 98风格的滑动条：

• 使用<input type="range">
• 可添加has-box-indicator类改变滑块样式
• 支持垂直方向

<div class="is-vertical">
  <input type="range" class="has-box-indicator">
</div>

最佳实践

1. 保持语义化：始终使用正确的HTML元素
2. 确保可访问性：为所有交互元素添加适当的标签
3. 合理分组：使用field-row保持控件间距一致
4. 状态反馈：为不同状态(禁用、焦点等)提供清晰视觉反馈

结语

98.css为开发者提供了一种简单而有趣的方式，可以在现代网页中重现Windows 98的经典界面风格。无论是为了怀旧、教育目的，还是特殊的艺术表达，这个库都能帮助你快速实现目标。通过遵循语义化HTML标准和良好的可访问性实践，你可以在保持复古风格的同时，确保用户体验的现代性和可用性。