98.css类似Windows98界面的CSS库v0.1.20.zip资源-CSDN文库

共50个文件

svg：21个

txt：4个

png：3个

版权申诉

35 浏览量 2024-03-18 21:13:30 上传评论收藏 147KB ZIP 举报

98.css是一个模仿Windows 98操作系统的用户界面风格的CSS库，主要用于网页设计和开发。这个库允许开发者轻松地创建具有怀旧Windows 98风格的网页元素，如按钮、窗口、图标等，为用户提供一种复古的视觉体验。98.css v0.1.20是该库的一个版本，可能包含了一些新特性或修复了已知问题。在使用98.css时，首先你需要将库文件98.css引入到你的HTML文档中。这通常通过在<head>部分添加<link>标签来完成，例如： ```html <link rel="stylesheet" href="98.css"> ``` 确保98.css文件与你的HTML文件位于同一目录下，或者提供正确的相对路径。一旦引入，你可以开始使用预定义的CSS类来构建Windows 98风格的组件。例如，要创建一个具有Windows 98样式的按钮，你可以使用以下HTML代码： ```html <button class="win-btn">点击我</button> ``` 98.css库提供了丰富的样式，包括各种控件（如复选框、单选按钮、输入框）和对话框的样式。为了实现更复杂的布局，你可能需要结合使用HTML和CSS来构造仿真的窗口： ```html <div class="win-dialog"> <div class="win-caption"> <span class="win-icon win-taskbar-icon"></span> <h3 class="win-title">我的程序</h3> </div> <div class="win-content"> <p>这是一个示例窗口。</p> </div> <div class="win-buttons"> <button class="win-btn win-btn-ok">确定</button> <button class="win-btn win-btn-cancel">取消</button> </div> </div> ``` 此外，"98.css"库还可以与JavaScript库（如jQuery）结合使用，以实现动态效果，比如窗口的打开和关闭，以及按钮的点击事件处理。通过监听按钮的点击事件，可以添加交互功能： ```javascript $('.win-btn-ok').on('click', function() { alert('操作成功'); }); ``` 这个库对于那些喜欢复古风格或是想在项目中加入独特视觉元素的开发者来说非常有趣。同时，它也可以作为一个学习资源，帮助理解如何使用CSS来实现复杂的UI设计。对于毕业设计论文或计算机案例研究，98.css可以作为一个创新的实践案例，展示Web开发中的用户体验设计和前端技术的运用。 98.css是一个富有创意的开源项目，它不仅提供了一种将Windows 98界面风格带入现代网页设计的方法，同时也展示了CSS的强大能力和可定制性。通过深入学习和实践，开发者可以进一步掌握CSS布局、选择器、伪类和过渡效果，提升网页设计技能。

资源推荐

资源详情

资源评论

收起资源包目录

98.css类似Windows 98界面的CSS库 v0.1.20.zip （50个子文件）

说明.htm 4KB

98.css-0.1.20

style.css 19KB

.editorconfig 294B

.github

workflows

npm-publish.yml 648B

LICENSE 1KB

server.js 411B

docs

zoom.png 4KB

docs.css 2KB

window.png 3KB

index.html.ejs 35KB

icon.png 209B

vs.css 836B

package.json 1KB

build.js 2KB

package-lock.json 330KB

.npmignore 14B

now.json 37B

.gitignore 20B

icon

button-down.svg 630B

indicator-rectangle-horizontal.svg 415B

button-right.svg 629B

sunken-panel-border.svg 545B

help.svg 411B

radio-border-disabled.svg 744B

checkmark.svg 226B

scrollbar-background.svg 275B

button-up.svg 629B

minimize.svg 141B

groupbox-border.svg 279B

restore.svg 513B

radio-border.svg 743B

radio-dot-disabled.svg 200B

close.svg 270B

maximize.svg 203B

button-left.svg 628B

button-down-active.svg 381B

indicator-horizontal.svg 523B

checkmark-disabled.svg 228B

radio-dot.svg 198B

README.md 3KB

fonts

converted

ms_sans_serif_bold.woff 8KB

ms_sans_serif.woff 8KB

ms_sans_serif.woff2 6KB

ms_sans_serif_bold.woff2 6KB

src

ms-sans-serif

MS Sans Serif.ttf 14KB

license.txt 223B

readme.txt 1KB

ms-sans-serif-bold

MS Sans Serif Bold.ttf 12KB

license.txt 228B

readme.txt 1KB

## 98.css [![npm](https://98badges.now.sh/api/version)](http://npm.im/98.css) [![gzip size](https://98badges.now.sh/api/size)](https://unpkg.com/98.css) A design system for building faithful recreations of old UIs. <img alt="a screenshot of a window with the title 'My First VB4 Program' and two buttons OK and Cancel, styled like a Windows 98 dialog" src="https://github.com/jdan/98.css/blob/main/docs/window.png?raw=true" height="133"> <img alt="a magnified view showing pixel-perfect borders on a scrollbar and button element" src="https://github.com/jdan/98.css/blob/main/docs/zoom.png?raw=true?raw=true" height="133"> 98.css is a CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice. Be sure to check out [XP.css](https://botoxparty.github.io/XP.css/) and [7.css](https://khang-nd.github.io/7.css/) as well. ### Installation / Usage The easiest way to use 98.css is to import it from [unpkg](https://unpkg.com/). ```html <!DOCTYPE html> <html> <head> <title>98.css example</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://unpkg.com/98.css" /> </head> <body> <div class="window" style="margin: 32px; width: 250px"> <div class="title-bar"> <div class="title-bar-text"> My First VB4 Program </div> </div> <div class="window-body"> <p>Hello, world!</p> </div> </div> </body> </html> ``` Alternatively, you can grab 98.css for [the releases page](https://github.com/jdan/98.css/releases) or [npm](https://www.npmjs.com/package/98.css). ``` npm install 98.css ``` Here is an example of [98.css being used with React](https://codesandbox.io/s/objective-chandrasekhar-t5t6h?file=/src/index.js), and [an example with vanilla JavaScript](https://codesandbox.io/s/late-sound-miqho?file=/index.html). Refer to the [documentation page](https://jdan.github.io/98.css/) for specific instructions on this library's components. ### Developing First, run `npm install`. [`style.css`](https://github.com/jdan/98.css/blob/main/style.css) is where everything happens. You can use `npm start` to start a development environment that will watch for file changes and rebuild 98.css, reloading your browser in the process. You can run a build manually with `npm run build`. This will write to the `dist/` directory. ### Issues, Contributing, etc. Refer to [the GitHub issues page](https://github.com/jdan/98.css/issues) to see bugs in my CSS or report new ones. I'd really like to see your pull requests (especially those new to open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like to make it a fun place to build your open-source muscle. Thank you for checking my little project out, I hope it brought you some joy today. Consider [starring/following along on GitHub](https://github.com/jdan/98.css/stargazers) and maybe subscribing to more fun things on [my twitter](https://twitter.com/jdan). �� ### Publishing Building the docs site: `npm run deploy:docs` Publishing to npm: `npm run release` ### License [MIT](https://github.com/jdan/98.css/blob/main/LICENSE)

评论收藏

内容反馈

版权申诉