一，前言

最近有一个需求：我采用了纯原生前端，没有使用框架，从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;
}

上述代码解释：

letter-spacing：设置元素的间距。这里让他们挨到一起。

logo-text span：另外的设置一下颜色。

五，最后

为了继续我宁写少，不多写的发文特点，轮转图放到下一篇来写吧。

此篇仅仅作为本网站开头。