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

1、思路解析与灵感获取
- 多看、多写
- 图片模仿提升
2、动手制作
- 1）准备工具：
- 2）图片布局解析：
- - 大分块
  - 小细分
- 3）上代码：
- - 大分块
  - 小细分
  - 效果演示

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

1、思路解析与灵感获取

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

多看、多写

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

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

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

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

图片模仿提升

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

2、动手制作

1）准备工具：

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

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

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

2）图片布局解析：

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

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

大分块

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

小细分

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

3）上代码：

大分块

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/*内联样式表*/*{margin:0;padding:0;}/*body*/.body{background-color: #e7e7e7;}/*主体*/.main {background-color: #FFFFFF;width: 1000px;height: auto;padding: 40px 25px 35px 25px;/*边距  上,  右,  下,  左*/margin: 30px auto;}/*主标题*/.title{background-color: #25B3F0;height: 85px;width: auto;text-align: center;line-height: 85px;font-size: 40px;color: #FFFFFF;              }/*信息页面-主体*/.information{width: auto;height: 600px;background-color: #87CEEB;/*定位用的，后期去掉*/padding: 20px 40px 20px 40px;/*边距  上,  右,  下,  左*/         }.huawen{font-family: "华文楷体";}</style></head><body class="body"><div class="main"><div class="title huawen">ots-luo-github博客</div><div class="information">     </div>    </div></body>
</html>

预览图：

小细分

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>div流布局</title><style type="text/css">/*内联样式表*/*{margin:0;padding:0;}/*body*/.body{background-color: #e7e7e7;}/*主体*/.main {background-color: #FFFFFF;width: 1000px;height: auto;padding: 40px 25px 35px 25px;/*边距  上,  右,  下,  左*/margin: 30px auto;}/*主标题*/.title{background-color: #25B3F0;height: 85px;width: auto;text-align: center;line-height: 85px;font-size: 40px;color: #FFFFFF;                }/*信息页面-主体*/.information{width: auto;height: auto;background-color: #87CEEB;/*定位用的，后期去掉*/padding: 20px 40px 20px 40px;/*边距  上,  右,  下,  左*/          }/*信息头部*/.information_title{        width:150px;height: 50px;background-color: #5b9cd6;line-height: 50px;   color: #FFFFFF;text-align: center;font-size: 25px;float: left;}/*信息内容*/.information_content{width:920px;height: 250px;background-color: #ffffff;margin-top: 50px;}/*版权*/.footer{background-color: #787878;color: #FFFFFF;width: auto;height: 50px;text-align: center;line-height: 50px;     }/*通用*//*分割线*/.Separator{width: 0px;padding: 0 0px 0;margin: 20px 0;line-height: 50px;height: 8px;border-right: 700px solid #5b9cd6;margin-left: 70px;background-color: #000000;float: left;    }   /*字体*/.huawen{font-family: "华文楷体";}</style></head><body class="body"><div class="main"><div class="title huawen">ots-luo--github博客</div><div class="information"><div class="information_title huawen">标题</div><div class="Separator"><!--分割线--></div><div class="information_content ">内容</div>     <div class="information_title huawen">标题</div><div class="Separator"><!--分割线--></div><div class="information_content ">内容</div>              </div>        <div class="footer">@Copyright 2020-2021 ots-luo 版权所有</div></div></div></body>
</html>

预览图：

我这里通过文字表示，区分位置方便识别。

效果演示

全部代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="shortcut icon" sizes="32x32" href="favicon.ico"/><title>ots-luo-div流布局</title><style type="text/css">/*内联样式表*/*{margin:0;padding:0;}/*body*/.body{background-color: #e7e7e7;}/*主体*/.main {background-color: #FFFFFF;width: 1000px;height: auto;padding: 40px 25px 35px 25px;/*边距  上,  右,  下,  左*/margin: 30px auto;}/*主标题*/.title{background-color: #25B3F0;height: 85px;width: auto;text-align: center;line-height: 85px;font-size: 40px;color: #FFFFFF;             }/*信息页面-主体*/.information{width: auto;height: auto;padding: 20px 40px 20px 40px;/*边距  上,  右,  下,  左*/            }/*信息头部*/.information_title{        width:150px;height: 50px;background-color: #5b9cd6;line-height: 50px;   color: #FFFFFF;text-align: center;font-size: 25px;float: left;}/*信息内容*/.information_content{width:920px;height: 350px;background-color: #ffffff;margin-top: 50px;}/*信息内容 ul标签*/ul{height: 110px;width: 100px;           float: left;            list-style: none;           font-size:23px;margin: 30px 0 0 30px;/*边距  上,  右,  下,  左*/          }/*信息内容 li标签*/ul li{height: 60px;width: 120px;float: left;font-size:23px;       }/*信息内容 用户头像*/.user_circle{height: 200px;width: 200px;background-color: #25B3F0;float: left;border-radius: 50%;/*设置圆角*/-moz-border-radius: 50%;-webkit-border-radius: 50%;  /*设置圆角,为了兼容性,上面2个都是*/position: relative;/*相对定位*/top:20%;left: 10%;}/*信息内容 内容排版*/.inf_ct_paiban{height: auto;width: auto;float: left;margin: 30px;padding: 20px 10px 0 150px;/*边距  上,  右,  下,  左*/font-size: 23px;line-height: 37px; }/*版权*/.footer{background-color: #787878;color: #FFFFFF;width: auto;height: 50px;text-align: center;line-height: 50px;      }/*通用*//*分割线*/.Separator{width: 0px;padding: 0 0px 0;margin: 20px 0;line-height: 50px;height: 8px;border-right: 700px solid #5b9cd6;margin-left: 70px;background-color: #000000;float: left;    }   /*字体*/.huawen{font-family: "华文楷体";}/*本文有个难题没有解决，就是当所有元素都是浮动时，如何居中*/</style></head><body class="body"><div class="main"><div class="title huawen">ots-luo--github博客</div><div class="information">                 <div class="information_title huawen">基本资料</div><div class="Separator">                     </div><div class="information_content ">                         <ul><li>姓名：</li><li>性别：</li><li>籍贯：</li><li>联系电话：</li><li>求职意向：</li></ul><ul><li>ots-luo</li><li>男</li><li>中国</li><li>******</li><li>无</li></ul><ul><li>出生年月：</li><li>政治面貌：</li><li>学历：</li><li>专业：</li><li>毕业学校：</li></ul><ul><li>2020 3</li><li>党员</li><li>博士</li><li>金融管理</li><li>清华大学</li></ul>                   <img class="user_circle" alt="ots-luo-logo"  src="./img/user-logo.png"/></div>         <div class="information_title huawen">个人简介</div><div class="Separator"></div><div class="information_content"><div class="inf_ct_paiban">我是一个自信，勤奋，喜欢接受挑战的年轻人，对工作认真负责，对于当今充满挑战的社会里，经过自己的努力和别人的帮助下，能在不久的将来，在以后的工作中，深信自己用冲破世俗的勇气，百折不挠的精神和出奇的毅力，在将来的工作生活中取得优质的飞跃，迎接新的调整</div></div></div>   <div class="footer">@Copyright 2020-2021 ots-luo 版权所有</div></div></div></body>
</html>

预览图：

我是ots-luo，码字不易，写教程也不易，如果觉得文章不错，可以点赞评论，感谢支持！！

更多文章记得关注我的博客
网站文章对应：点击传送