一，前言

最近有一个需求：我采用了纯原生前端，没有使用框架，从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：另外的设置一下颜色。

五，最后

为了继续我宁写少，不多写的发文特点，轮转图放到下一篇来写吧。
此篇仅仅作为本网站开头。

个人网站开发之前端首次造轮子_篇一【前端大作业】【gowork.fit】相关推荐

基于JavaSwing开发联机坦克游戏（服务器+客户端）课程设计大作业
基于JavaSwing开发联机坦克游戏(服务器+客户端): (大作业) 开发环境: Windows操作系统开发工具: MyEclipse+Jdk 运行效果图: 基于JavaSwing开发联机坦克 ...
基于S2SH开发时鲜果品（水果）销售购物系统（大作业/毕业设计）
项目演示录屏基于S2SH开发时鲜果品(水果)销售购物系统注意:录制视频中后台管理员删除和修改bug已修复成功基于S2SH开发时鲜果品(水果)销售购物系统(大作业/毕业设计) 开发工具: MyE ...
基于JavaSwing开发开发的打字软件(疯狂打字通)+论文课程设计大作业源码
基于JavaSwing开发开发的打字软件(疯狂打字通)+论文: (大作业) 开发环境: Windows操作系统开发工具: MyEclipse+Jdk 运行效果图: 基于JavaSwing开发开发 ...
hbuilder前端需要的插件_初学Web前端会用到开发工具（附官网下载地址）
目前市面上比较流行的前端开发工具主要有WebStorm.Vscode.Sublime.HBuilder.notepad++.EditPlus.记事本等,今天介绍一下这些开发工具,并且给出了下载地址. ...
web前端知识点太多_初学web前端，学习方法容易走偏，这是为什么？
一.了解web前端所谓"知己知彼,百战不殆",在学习web前端之前,还是让我们先了解一下什么是web前端吧! 所有用户终端产品与视觉和交互有关的部分,都属于前端开发的领域.从狭义 ...
hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
前端交接文档_开发型Web前端和设计型Web前端的区别是什么？
小编说学Web前端,你弄懂开发型Web前端和设计型Web前端的区别了吗?今天千锋广州小编给大家梳理一下设计型Web前端做什么?都要学习什么? 想必大家也会遇到这种情况,要做一个项目,产品经理说产品原型 ...
基于JavaSwing开发学生信息管理系统(SQLServer数据库版本) 毕业设计课程设计大作业
基于JavaSwing开发学生信息管理系统(SQLServer数据库版本): (大作业) 开发环境: Windows操作系统开发工具: MyEclipse+Jdk+SQLServer数据库运行 ...
java重复造轮子系列篇-----时间date
2019独角兽企业重金招聘Python工程师标准>>> 时间操作工具类 package org.jeecgframework.core.util;import java.beans. ...

个人网站开发之前端首次造轮子_篇一【前端大作业】【gowork.fit】

文章目录