首页 >> 互联网资讯 >>IT知识 >> web前端开发:github个人主页搭建思路与教程
详细内容

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

时间:2020-03-29     作者:luo【原创】   阅读

前言

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

1、思路解析与灵感获取

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

多看、多写

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


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

70.png

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

71.png

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

图片模仿提升

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

true.jpg

2、动手制作

1)准备工具:

1、自己的网站(域名+服务器)

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

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


2)图片布局解析:

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

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


大分块

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


小细分

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

效果演示

全部代码:

大分块

无标题.png



ots网络logo

OTS网络安全门户主要提供网络信息安全教程、文章、工具,让更多的小伙伴加入我们的社区一起学习。

技术支持: 建站ABC | 管理登录