web前端开发：github个人主页搭建思路与教程
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，码字不易，写教程也不易，如果觉得文章不错，可以点赞评论，感谢支持！！
更多文章记得关注我的博客
网站文章对应：点击传送