web前端开发：github个人主页搭建思路与教程

前言

大家好，我是ots-luo，相信很多小白在看到别人的主页很漂亮时，自己也想所一个，兴致勃勃的打开电脑准备巧代码，缺发现，思路和灵感都没有。那么棒的，我给大家分享一下。

1、思路解析与灵感获取

新手接触web前端，都对很多前端的知识都是迷茫状态，既然打算接触，那么就是具有对web的兴趣。

多看、多写

打破迷茫状态唯一的方法就是，“多看，多写”

多看： 多看别人的作品，新手就对个人主页入手，我们可以通过搜“个人主页、个人博客”的关键字，查找别人的作品。随手一搜就很多。

多写： 多写有两种，
1、照葫芦画瓢，参考模仿的写
2、查看网页源代码，看别人是怎么写的。
查看源代码方法：
任意浏览器进入网站，按“F12”即可查看，以最简单页面的百度一下为例。

我们还可以左下角的类似鼠标的按钮，点击它，然后鼠标滑动到任意地方，就会显示对应的代码和样式，是不是很方便呢？这是一个技巧，伙伴们记得多用，效率可以提高很多。

图片模仿提升

当你熟悉了代码和原理之后，可以尝试的不看代码，通过找图片的方式，自己来制作，下面我在详细的讲解。
现在思路和灵感都有的了，在网上随意搜索一张个人简历的图片模板，做为练手

2、动手制作

1）准备工具：

1、自己的网站（域名+服务器）

没有github网站的可以查看以往的教程文章进行搭建，点击跳转

2、适合自己的html代码编辑器

2）图片布局解析：

• 制作网页时，都需要对布局进行分析，采用的是什么布局和这样的布局我们如何制作。

• 例如上面提供的素材，我们可以上面图片进行分解，分解的技巧为“先大分块，再小细分”

大分块

例如，提供的素材可分为，标题和主要内容的大分块。

小细分

主要内容区，分为5个类别内容块，每个类别内容块又可以分为类别内容块的标题和内容以此类推。

效果演示

全部代码：

大分块