Logo

菜单

发布于 2026-01-05 2 阅读
0

使用 NES.css 创建类似 8 位像素风格的网站

使用 NES.css 创建类似 8 位像素风格的网站

距离上次发帖已经有一段时间了，哈哈。这篇文章将向你展示如何使用 CSS 框架创建一个类似 8 位像素风格的网站NES.css。

GitHub 标志 怀旧 CSS / NES.css

NES 风格的 CSS 框架 | 流行CSSfureームワーク

NES.css 是一个NES 风格（类似 8 位机）的CSS 框架。

吉特 承诺友好

安装

款式

NES.css 可通过 npm（首选）、Yarn 或 CDN 获取。

通过软件包管理器

npm install nes.css
# or
yarn add nes.css
Enter fullscreen mode Exit fullscreen mode

我们的package.json数据包含以下键下的一些附加元数据：

  • sass- 指向我们主 Sass 源文件的路径
  • style- 指向我们未压缩 CSS 的路径
AltCSS（sass、scss...）
// style.scss
@import "./node_modules/nes.css/css/nes.css"
Enter fullscreen mode Exit fullscreen mode
JavaScript
// script.js
import "nes.css/css/nes.min.css";
Enter fullscreen mode Exit fullscreen mode

您需要安装 css-loader。

HTML
<!-- index.html -->
<html>
  <head>
    <link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
  </head>
  <body></body>
</html>
Enter fullscreen mode Exit fullscreen mode

通过 CDN

通过元素导入 CSS <link />：

<!-- minify -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="
…
Enter fullscreen mode Exit fullscreen mode
在 GitHub 上查看

NES.css这是一个NES风格（类似8位机）的CSS框架。它非常易于使用，因此是一个很棒的框架。

您可以点击此处了解如何使用 NES.css：
https://nostalgic-css.github.io/NES.css/

替代文字

基本上，你只需要添加一些元素class。如果你知道如何使用网格系统，你可以创建类似下图所示的布局。

替代文字

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css"
    type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
  <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
  <title>8bit site</title>
  <style>
    body {
      padding-bottom: 90px;
    }
    .nes-progress {
      height: 25px;
    }
  </style>
</head>
<body>
  <nav style="padding: 20px; border-bottom: 3px solid #ccc; margin-bottom: 60px;">
    <div class="container">
      <h2 style="margin-bottom: 0;">
        <i class="snes-jp-logo"></i>
        NES css test
      </h2>
    </div>
  </nav>

  <div class="container" style="margin-bottom: 50px;">
    <div class="row">
      <div class="col">
        <i class="nes-bcrikko"></i>
      </div>
      <div class="col-sm-9 col-xs-12">
        <div class="nes-balloon from-left">
          <p style="color: #ff0000"><span>Hit 5000 followers</span></p>
          <p>Thank you!!!</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <!-- left -->
      <div class="col-md-4 col-sm-12 col-xs-12">
        <div class="nes-container with-title">
          <h3 class="title">About me</h3>
          <div>
            <div class="lists">
              <ul class="nes-list is-circle" style="margin-bottom: 0;">
                <li>human</li>
                <li>human</li>
                <li>human</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="nes-container with-title is-dark" style="margin-top: 50px; margin-bottom: 50px;">
          <h3 class="title">Key Word</h3>
          <div>
            <i class="nes-icon is-small heart"></i>
            Test test test
            <i class="nes-icon is-small star"></i>
          </div>
        </div>
        <div class="nes-container with-title" style="margin-top: 50px; margin-bottom: 50px;">
          <div class="title">social media</div>
          <div>
            <a href="">
              <i class="nes-icon twitter"></i>
            </a>
            <a href="">
              <i class="nes-icon facebook"></i>
            </a>
            <a href="">
              <i class="nes-icon github"></i>
            </a>
            <a href="">
              <i class="nes-icon google"></i>
            </a>
            <a href="">
              <i class="nes-icon youtube"></i>
            </a>
          </div>
        </div>
      </div>
     <!-- right      -->
      <div class="col-md-8 col-sm-12 col-xs-12">
        <div class="nes-container with-title">
          <h3 class="title">Somthing</h3>
          <div class="row">
            <div class="col-sm-4 col-xs-12">something 1</div>
            <div class="col-sm-8 col-xs-12">
              <progress
                class="nes-progress is-success"
                value="65"
                max="100"
              >
              </progress>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 2</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-error" value="25" max="100">
              </progress>
            </div>
          </div>

          <div class="row">

          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 3</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-pattern" value="50" max="100">
              </progress>
            </div>
          </div>
        </div>

        <div class="nes-container with-title is-dark" style="margin-top: 40px;">
          <h3 class="title">Item</h3>
          <div class="row">
            <div class="col-sm-4 col-xs-12">something 1</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress" value="95" max="100">
              </progress>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 2</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-warning" value="95" max="100">
              </progress>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 3</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-error" value="95" max="100">
              </progress>
            </div>
          </div>
        </div>

        <div class="nes-container with-title" style="margin-top: 40px; margin-bottom: 40px">
          <h3 class="title">Room</h3>
          <div class="row">
            <div class="col-sm-4 col-xs-12">something 1</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress" value="95" max="100">
              </progress>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 2</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-warning" value="95" max="100">
              </progress>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 3</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-error" value="95" max="100">
              </progress>
            </div>
          </div>
        </div>

        <h3 class="topic-title">
          <i class="nes-icon star"></i> Hey hey hey
        </h3>
        <div class="nes-container is-dark">
          <div class="row">
            <div class="col-xs-2">
              <img
              src="https://github.com/BcRikko.png?size=20"
              style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;"
              />
            </div>
            <div class="col-xs-10">
              <h3>Hello hello hello</h3>
              <p>bye bye bye</p>
            </div>
          </div>
          <div class="row" style="margin-top: 30px;">
            <div class="col-xs-2">
              <img src="https://github.com/BcRikko.png?size=20"
                style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;" />
            </div>
            <div class="col-xs-10">
              <h3>Hello hello hello</h3>
              <p>bye bye bye</p>
            </div>
          </div>
          <div class="row" style="margin-top: 30px;">
            <div class="col-xs-2">
              <img src="https://github.com/BcRikko.png?size=20"
                style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;" />
            </div>
            <div class="col-xs-10">
              <h3>Hello hello hello</h3>
              <p>bye bye bye</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="container" style="margin-top: 50px; font-size: 90%;">
    <div class="row">
      <div class="col-xs-12" style="text-align: center; color: #a9f9a9; background: #000;">
        Using NES.css 2019
      </div>
    </div>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

请我喝杯咖啡

文章来源：https://dev.to/0xkoji/create-8bit-like-site-with-nes-css-2fjn
Valerie：用 Rust 重新...
7 个你应该了解的开源项目 - J...