一个用于构建忠实再现旧用户界面的设计系统。前言 98.css 是一个用于构建看起来像 Windows 98 的界面的 CSS 库。请在 GitHub 上查看更多内容。我的第一个 VB4 程序 你好，世界！这个库依赖于语义化的 HTML 使用。要创建一个按钮，您需要使用 <button>。输入元素需要标签。图标按钮依赖 aria-label。本页面将指导您完成这个过程，但可访问性是本项目的主要目标。您可以在保持本库外观的同时覆盖许多元素的样式。需要在您的按钮上增加更多的内边距？没问题。需要为您的输入标签添加一些颜色？请随意使用。这个库不包含任何 JavaScript，它仅使用一些 CSS 来为您的 HTML 添加样式。这意味着 98.css 与您选择的前端框架兼容。以下是 98.css 与 React 一起使用的示例，以及使用原生 JavaScript 的示例。使用 98.css 的最简单方式是从 unpkg 导入。<link rel="stylesheet" href="https://unpkg.com/98.css">您可以从 GitHub 发行页面或 npm 安装 98.css。npm install 98.css 组件 按钮 一个命令按钮，也称为推送按钮，是一个控制项，当用户点击它时会导致应用程序执行某些操作。标准按钮宽 75px，高 23px，具有凹起的外边框和内边框。默认情况下，它们给定 12px 的水平内边距。显示代码 <button> 点击我 </button> <input type="submit" /> <input type="reset" />您可以将 class 默认添加到任何按钮，以应用额外样式，这在与用户沟通活动窗口中按下 Enter 键时默认行为时非常有用。显示代码 <button class="default">好</button>当按钮被点击时，凸起的边框变为凹陷。以下按钮被模拟为按下（活动）状态。显示代码 <button> 我正在被按下 </button>禁用按钮保持相同的凸起边框，但标签的外观“被冲淡”。显示代码 <button disabled> 我不能被点击 </button>按钮焦点用虚线边框表示，距离按钮内容内部 4px。以下示例被模拟为获得焦点。显示代码 <button> 我获得焦点 </button>复选框 复选框表示独立或非独占的选择。复选框使用凹陷面板表示，选中时旁边有一个“勾选”图标，旁边是指示选择的标签。注意：您必须在复选框后包含相应的标签，使用具有指向您输入的 id 的 for 属性的 <label> 元素。这确保复选框与辅助技术的兼容性，同时确保所有用户的良好体验（使用 Tab 键导航，能够点击整个标签以选择框）。这是一个复选框 显示代码 <input type="checkbox" id="example1"> <label for="example1">这是一个复选框</label>复选框可以使用标准的 checked 和 disabled 属性进行选择和禁用。在分组输入时，将每个输入包裹在一个具有 field-row 类的容器中。这确保了输入之间的一致间距。 我被选中 我没有活动 我没有活动但仍然被选中 显示代码 <div class="field-row"> <input checked type="checkbox" id="example2"> <label for="example2">我被选中</label> </div> <div class="field-row"> <input disabled type="checkbox" id="example3"> <label for="example3">我没有活动</label> </div> <div class="field-row"> <input checked disabled type="checkbox" id="example4"> <label for="example4">我没有活动但仍然被选中</label> </div>选项按钮 选项按钮，也称为单选按钮，表示在有限的一组互斥选择中的单一选择。也就是说，用户只能选择一组选项。可以通过在输入元素上指定类型为 radio 的方式使用选项按钮。可以通过在每个输入上指定共享的 name 属性来对选项按钮进行分组。就像之前一样：在分组输入时，将每个输入包裹在具有 field-row 类的容器中，以确保输入之间的一致间距。 是 否 显示代码 <div class="field-row"> <input id="radio5" type="radio" name="first-example"> <label for="radio5">是</label> </div> <div class="field-row"> <input id="radio6" type="radio" name="first-example"> <label for="radio6">否</label> </div>选项按钮还可以使用其相应的 HTML 属性被选中和禁用。花生酱应该是光滑的 我理解人们为什么喜欢脆花生酱 脆花生酱很好 显示代码 <div class="field-row"> <input id="radio7" type="radio" name="second-example"> <label for="radio7">花生酱应该是光滑的</label> </div> <div class="field-row"> <input checked disabled id="radio8" type="radio" name="second-example"> <label for="radio8">我理解人们为什么喜欢脆花生酱</label> </div>