在前端开发中，随着技术的不断发展，我们需要使用各种各样的工具和依赖来提高我们的效率和体验。而 npm（Node Package Manager）就是我们经常用到的一个非常重要的工具。npm 包 @year/1977 也是其中之一，这是一个用于生成 70 年代风格的 CSS 文本框框架，可以让我们的页面看起来更加具有年代感。
安装与使用
安装 @year/1977 可以参考以下命令：
npm install @year/1977
接下来你可以在你的 HTML 页面中引入该包：
<link rel="stylesheet" href="node_modules/@year/1977/dist/1977.min.css">
然后就可以在页面中使用 form 元素和相应的 CSS 类了。
<form class="form-1977"> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="请输入密码"> <button type="submit">登录</button> </form>
效果展示
经过上述操作之后，我们可以得到以下效果图：
可以看到，这个包生成的输入框和按钮看上去非常古老，因为他们带着 70 年代的复古感。这样一来，当你想要将你的页面变得更为复古时，可以考虑使用 @year/1977。
自定义样式
虽然这个包的内容已经非常好了，但是如果你想要自定义它的样式，你也可以在 @year/1977 的基础上进行修改。我们可以下载并处理压缩包，然后在原来的基础上进行修改。
-- -------------------- ---- ------- -- ----- -- --------- ---------------------- ----- -- -------- ----------------------- ----- -- ----- ------- -------------------------------------------
这里通过设置 $form-input-font-size 和 $form-button-font-size来自定义输入框和按钮的字体大小。你可以根据自己的需要进行修改。
结语
本文简单介绍了如何使用 npm 包 @year/1977，以及如何在原有基础上自定义样式。通过使用这个包，我们可以为我们的页面增加一份设计巧妙的复古感，从而提高网站的用户体验。希望这篇文章可以给你提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cc581e8991b448da66f