一，前言

最近有一个需求：我采用了纯原生前端，没有使用框架，从0到1达到了百分百原创代码，作为主后端开发的我，前端开发技术非常菜，本次首次造轮子，代码非常的丑陋不具美感，狗头保命，后期将本网站以前后端分离开发。因为手里的项目还比较多，这个网站做为一个长期开发任务。以达到巩固基础的作用。
本文章分为若干篇记录。
在这里插入图片描述

二，开发目的

传递技术力量，传承布道精神。Website Introduction
欢迎您，这里是上进小菜猪的个人网站,请牢记本网站域名gowrok.fit，寓意是希望各位都有一个好的工作。我作为一个开发爱好者，虽然技术有限，但尽可能做到开源和技术文章共享。现已经开源2个项目，发布技术类文章300余篇。
自再云间，乘风而上。这是一个最好的时代，也是一个最坏的时代。如今的开源分享精神达到了前所未有的程度，我们不再为学不到高深的技术而发愁。同时也是一个最坏的时代，如今的技术日新月异，我们越深入学越会发现，如今的技术栈深如大海，自己掌握的与之相比犹如沧海一粟。如今的IT大环境与20年前相比恍如隔世，这意味着我们背负着极大的就业压力，让人窒息。
gowrok.fit长期规划：目前处于前期搭建状态，中期对接定时爬虫，爬取技术类文章，后期构建MCN矩阵同步技术多功能集成网站。(目前原生前端，友好性较差，后期使用框架重构)

三，页面样式

目前只有一个页面，比较长，多截几个图。
在这里插入图片描述

四，顶部导航栏

在这里插入图片描述
特点：网站名称颜色不一样，增加美感。按钮下选中样式，增加友好性。
采用顶部css分离，避免冲突，方便开发。

<nav>
<ul><li class="select"><a href="index.html"><span class="spanhen">主页</span></a></li><li><a href="myblog.html"><span>我的博客</span></a></li><li><a href="resume.html">小功能</a></li><li><a href="contact.html">个人介绍</a></li>
</ul>
</nav>

上述代码解释：
class=“spanhen”，控制横线样式，增加用户友好性。

.spanhen {border-bottom: 5px solid #afb42b;padding-bottom: 10px;
}

border-bottom：底部边框属性。
边框样式：实心; 下边框：粗虚线#ff0000;
padding-bottom: 下内边距（底部空白）

<div class="logo-text">gowork<span>.fit</span></div>

上述代码解释：logo-text控制盒子位置，等等信息。
span为了另外设置.fit的颜色。

.header .logo-text {position: absolute;left: 150px;margin-top: -11px;top: 50%;font-weight: 900;font-size: 40px;color: black;letter-spacing: 0;margin-top: -30px;
}
.logo-text span {color: #AFB42B;
}