这是我参与「第四届青训营 」笔记创作活动的第1天

开始

今天是字节青训营的第三天，昨天我得到了一个很长的视频，并且试图去认认真真的听完它。但我还是高估了我自己，长达两小时的视频让我找回了高三上网课的感觉。老师讲老师的，我玩我的，我们谁都不打搅谁。

于是乎我放着“BGM”刷着手机，两小时就这么过去了。我在视频最后的几分钟放下了手机，认真听老师讲了最后的几分钟课，关闭网页，伸个懒腰，正要感慨今天又是充实的一天时。左手抬起来就是一个大嘴巴子，很快啊！一下子把我打进了另一个状态，一个自我检讨的状态：“就你这个虫豸的样子，将来怎么建设国家？！”

在此状态的加持下，我想起了我高三在学校时“拼命三郎”的状态，那真是“咖啡在左，浓茶在右，试卷还有辣么厚；智商不够，早起来凑，六点起床算落后。”。于是乎，我做出了一个违反...额，我决定一边学一边做！以一个真正的网页为目标，在实现它的过程中不断地更新自己的知识，并在最后对所用到的知识进行归纳总结。于我而言这或许是更为有效的学习方式。

第一步，就是找个倒霉。。。额，找个幸运的网站，（不知道是哪个幸运的网站被我选中（笑））就决定是你了，出来吧！皮...呸！出来吧，掘金！

那么开始第二步吧。首先是建立一个vue3的项目：

然后是按他的提示导入一些相关的包（创建vue3的项目在网上有很多教程，这里就不多做赘述了，我们的主要目的还是代码）。

搞完vue的相关事宜，就润它！润完后可以得到一个如下的标准网页：

接着就可以在VScode里魔改...额，学习我们的代码编写了。

首先是写一个导航头出来：

我本以为我对css语法的掌握不说七分，五分也有吧？然而实际上连二分都没有......，这是一个令人悲伤的故事。为了搞一个导航头查了半天的百度（属实是面向百度编程了，小白伤不起啊），然而最终效果还是不怎么理想，徒具其形罢了，甚至连形都做得不咋像......

虽然说搞这个东西搞得有点难受，严重打击了我的自信心，但这一天下来还是有一点点收获的。至少那几个样式的作用我是真的知道道咋用了，并且也让我意识到自己知识储备的严重缺失。 学习尚未完成，少侠请继续努力。

一些笔记：

设置一个定死的背景：

#building {

background-color: rgb(242 243 245);

width: 100%;

height: 100%;

position: fixed;

top: 0px;

left: 0px;

bottom: 0px;

right: 0px;

}

定死居中（暂时测试为不会移动，可用作导航）：

{

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

\