98.css
98.css
98.css is a design system for building faithful recreations of old UIs. 98.css 是一个用于构建忠实还原旧式用户界面的设计系统。
Intro: 98.css is a CSS library for building interfaces that look like Windows 98. See more on GitHub. 简介：98.css 是一个用于构建外观类似 Windows 98 界面的 CSS 库。更多信息请查看 GitHub。
My First VB4 Program Hello, world! OK Cancel 我的第一个 VB4 程序 Hello, world! 确定 取消
This library relies on the usage of semantic HTML. To make a button, you’ll need to use a <button>. Input elements require labels. Icon buttons rely on aria-label. This page will guide you through that process, but accessibility is a primary goal of this project.
该库依赖于语义化 HTML 的使用。要创建一个按钮，你需要使用 <button> 标签。输入元素需要标签（label）。图标按钮依赖于 aria-label。本页面将引导你完成该过程，但无障碍访问（Accessibility）是本项目的主要目标。
You can override many of the styles of your elements while maintaining the appearance provided by this library. Need more padding on your buttons? Go for it. Need to add some color to your input labels? Be our guest. 你可以在保持该库所提供外观的同时，覆盖元素的许多样式。需要给按钮增加内边距？尽管去做。需要给输入标签添加颜色？请便。
This library does not contain any JavaScript, it merely styles your HTML with some CSS. This means 98.css is compatible with your frontend framework of choice. Here is an example of 98.css used with React, and an example with vanilla JavaScript. 该库不包含任何 JavaScript，它仅仅通过 CSS 来美化你的 HTML。这意味着 98.css 与你选择的任何前端框架兼容。这里有一个 98.css 与 React 结合使用的示例，以及一个与原生 JavaScript 结合使用的示例。
The fastest way to use 98.css is to import it from unpkg. 使用 98.css 最快的方法是从 unpkg 导入。
<link rel="stylesheet" href="https://unpkg.com/98.css" >
You can install 98.css from the GitHub releases page, or from npm. 你可以从 GitHub 发布页面或通过 npm 安装 98.css。
npm install 98.css
Components
组件
Button
A command button, also referred to as a push button, is a control that causes the application to perform some action when the user clicks it. A standard button measures 75px wide and 23px tall, with a raised outer and inner border. They are given 12px of horizontal padding by default.
按钮
命令按钮（也称为下压按钮）是一种控件，当用户点击它时，会触发应用程序执行某些操作。标准按钮宽 75px，高 23px，具有凸起的外部和内部边框。默认情况下，它们具有 12px 的水平内边距。
Click me
Show code
<button>Click me</button>
<input type="submit" />
<input type="reset" />
点击我
显示代码
You can add the class default to any button to apply additional styling, useful when communicating to the user what default action would happen in the active window if the Enter key was pressed on Windows 98.
你可以给任何按钮添加 default 类来应用额外的样式，这在向用户传达“如果在 Windows 98 中按下回车键，活动窗口将执行什么默认操作”时非常有用。
OK
Show code
<button class="default">OK</button>
确定
显示代码
When buttons are clicked, the raised borders become sunken. The following button is simulated to be in the pressed (active) state. 当按钮被点击时，凸起的边框会变为凹陷。以下按钮模拟了被按下（激活）的状态。
I am being pressed
Show code
<button>I am being pressed</button>
我正在被按下
显示代码
Disabled buttons maintain the same raised border, but have a “washed out” appearance in their label. 禁用状态的按钮保持相同的凸起边框，但其标签呈现出一种“褪色”的外观。
I cannot be clicked
Show code
<button disabled>I cannot be clicked</button>
我无法被点击
显示代码
Button focus is communicated with a dotted border, set 4px within the contents of the button. The following example is simulated to be focused. 按钮的焦点通过虚线边框来传达，该边框设置在按钮内容内部 4px 处。以下示例模拟了获得焦点的状态。
I am focused
Show code
<button>I am focused</button>
我已获得焦点
显示代码
Checkbox
A check box represents an independent or non-exclusive choice. Checkboxes are represented with a sunken panel, populated with a “check” icon when selected, next to a label indicating the choice.
复选框
复选框代表一种独立或非排他的选择。复选框表现为一个凹陷的面板，选中时会显示一个“勾选”图标，旁边是标明选项的标签。
Note: You must include a corresponding label after your checkbox, using the <label> element with a for attribute pointed at the id of your input. This ensures the checkbox is easy to use with assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key, being able to click the entire label to select the box).
注意：你必须在复选框之后包含一个对应的标签，使用带有 for 属性的 <label> 元素，并将其指向输入框的 id。这不仅确保了复选框易于被辅助技术使用，还确保了所有人的良好用户体验（通过 Tab 键导航，能够点击整个标签来选中复选框）。
This is a checkbox
Show code
<input type="checkbox" id="example1"> <label for="example1">This is a checkbox</label>
这是一个复选框
显示代码
Checkboxes can be selected and disabled with the standard checked and disabled attributes. When grouping inputs, wrap each input in a container with the field-row class. This ensures a consistent spacing between inputs.
复选框可以通过标准的 checked 和 disabled 属性进行选中和禁用。在对输入框进行分组时，请将每个输入框包裹在带有 field-row 类的容器中。这确保了输入框之间的一致间距。
I am checked I am inactive I am inactive but still checked Show code (Code block omitted for brevity) 我已选中 我处于非活动状态 我处于非活动状态但仍被选中 显示代码
OptionButton
An option button, also referred to as a radio button, represents a single choice within a limited set of mutually exclusive choices. That is, the user can choose only one set of options. Option buttons can be used via the radio type on an input element. Option buttons can be grouped by specifying a shared name attribute on each input. Just as before: when grouping inputs, wrap each input in a container with the field-row class to ensure a consistent spacing between inputs.
单选按钮
单选按钮（也称为 Radio Button）代表在有限的互斥选项集中的单一选择。也就是说，用户只能从一组选项中选择一个。单选按钮可以通过输入元素的 radio 类型来使用。通过在每个输入框上指定共享的 name 属性，可以将单选按钮分组。和之前一样：在对输入框进行分组时，将每个输入框包裹在带有 field-row 类的容器中，以确保输入框之间的一致间距。
Yes No Show code (Code block omitted for brevity) 是 否 显示代码
Option buttons can also be checked and disabled with their corresponding HTML attributes. 单选按钮也可以通过其对应的 HTML 属性进行选中和禁用。
(Examples omitted for brevity) （示例省略）
GroupBox
A group box is a special control you can use to organize a set of controls. A group box is a rectangular frame with an optional label that surrounds a set of controls. A group box can be used by wrapping your elements with the fieldset tag. It contains a sunken outer border and a raised inner border, resembling an engraved box around your controls.
分组框
分组框是一种特殊的控件，你可以用它来组织一组控件。分组框是一个矩形框架，带有可选的标签，环绕着一组控件。通过使用 fieldset 标签包裹你的元素，即可使用分组框。它包含一个凹陷的外部边框和一个凸起的内部边框，看起来就像是在你的控件周围雕刻了一个盒子。
Select one: Diners Drive-Ins Dives Show code (Code block omitted for brevity) 选择一个： Diners Drive-Ins Dives 显示代码