Windows XP，承载你多少的记忆

秋天到了，又穿起了卫衣；秋天一到人总是非常的down，脑袋转着转着就开始怀念过去。遥想当年，小学一周一次的微机课可以有40分钟摸电脑时间那是相当的激动！xp的系统，大草原的壁纸，隔壁桌的可爱小女孩，真是怀念啊！今天就来画一个WindowsXP系统风格的页面。

css库的介绍：该库依赖于语义 HTML 的使用。要制作按钮，您需要使用<button>. 输入元素需要标签。图标按钮依靠 aria-label。本页面将引导您完成该过程，但可访问性是该项目的主要目标。

您可以覆盖元素的许多样式，同时保持此库提供的外观。您的按钮需要更多填充吗？大胆试试吧。需要为您的输入标签添加一些颜色吗？成为我们的客人。

这个库不包含任何 JavaScript，它只是用一些 CSS 来设置 HTML 的样式。这意味着 98.css 与您选择的前端框架兼容。

1. 第一步直接引入css库 包的大小为3.92kb（不会觉得我会自己写吧（狗头）） css的库名为98.CSS 直接pnpm i 98.CSS，npm太慢了

npm install 98.css
//或者也可以
 <link rel="stylesheet" href="https://unpkg.com/98.css">

2.开始使用css库，按钮直接使用button即可， 提交和重置也可以用input写， 标准按钮宽 75 像素，高 23 像素，具有凸起的外边框和内边框。默认情况下，它们的水平内边距为 12 像素。

效果如图

 <link rel="stylesheet" href="https://unpkg.com/98.css">
 <button>Click me</button>
<input type="submit" />
<input type="reset" />
</template>

XP最经典的就是弹窗了，咱们再试一试弹窗，用这个按钮来控制这个弹窗显示隐藏；（忽略我的命名）

    <link rel="stylesheet" href="https://unpkg.com/98.css">
   <button @click="qqqq" v-show="wwww">点我</button>
   
   <div>
       <div class="window" style="width: 300px;height: 100px;"  v-if="qqq" >
     <div class="title-bar">
       <div class="title-bar-text">稀土掘金</div>
       <div class="title-bar-controls">
         <button aria-label="Minimize"></button>
         <button aria-label="Maximize"></button>
         <button aria-label="Close" @click="qqqq1"></button>
       </div>
     </div>
     <div class="window-body">
       <p>Hello world !</p>
     </div>
   </div>
   </div>
   </template>
   <script setup >
     import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
   let qqq =ref(false)
   let wwww =ref(true)
   let qqqq=()=>{
       qqq.value=true
       wwww.value=false
   }
   let qqqq1=()=>{
       qqq.value=false
       wwww.value=true
   }
   </script>
   <style>
   </style>

效果图为：

这熟悉的标题颜色，熟悉的关闭按钮，有那味道了。

再试一个多选的下拉弹框

    <link rel="stylesheet" href="https://unpkg.com/98.css">
   <button @click="qqqq" v-show="wwww">点我</button>
   
   <div>
    <select>
  <option>5 - 好活!</option>
  <option>4 - 烂活!</option>
  <option>3 - 点赞了</option>
  <option>2 - 收藏了</option>
  <option>1 - 分享了</option>
</select>
   </div>
   </template>
   <script setup >
     import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
   let qqq =ref(false)
   let wwww =ref(true)
   let qqqq=()=>{
       qqq.value=true
       wwww.value=false
   }
   let qqqq1=()=>{
       qqq.value=false
       wwww.value=true
   }
   </script>
   <style>
   </style>

满满的都是年代感，XP承载了我太多的回忆，奥比岛、赛尔号、，4399。冰火人、，功夫派，植物大战僵尸，还有qq企鹅和qq空间，泪目。 文章到此结束，拜拜我去QQ空间偷菜了！