一款精致的个人主页源码
直接步入正题往下看吧！
移动端演示图:
PC端演示图:
HTML代码预览
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>感伤个人主页</title>
<link rel="icon" type="image/ico" href="//gravatar.kaygb.top/avatar/4cc893d113dd74ceca73f9863f2c5446/">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/gs.min.css">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div id="main" class="container">
<div class="row my-card justify-content-center">
<div class="col-lg-4 photo-bg"></div>
<div class="col-lg-8 card">
<h1>Hi，我是感伤/久绊，这是里我的主页！</h1>
<p>很荣幸您能访问我的网站！ 目前我仍在学习中，每天抽出时间来研究，励志成为一个技术很牛的程序员。
</p>
<p>
我很喜欢的一句话：<br>Even if the sky is falling down falling down.
<br> 即使天崩地裂天崩地裂
！ <br>I would search for you
<br>我依然会将你寻找
</p>
<p>您可以通过以下的方式来联系我。</p>
<a href="https://gsbok.cn" target="_blank" class="btn btn-secondary mt-2">My BLOG</a>
<a href="https://qm.qq.com/cgi-bin/qm/qr?k=GU3zOcwofzQfAaVzO88SZjspVV9RmTUv&noverify=0" class="btn btn-primary mt-2">My QQ</a>
<h4 class="mt-4">or, keep your eyes on</h4>
<ul class="social mt-1">
<li><a href="#"><i class="fab fa-weibo " aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-github" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-telegram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-zhihu" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div class="footer">
<footer class="mt-3">
<p>© 2019 - © <a href="https://gsbok.cn" target="_blank">久绊</a>
</p>
</footer>
</div>
</div>
<!-- <script defer src="static/js/bootstrap.min.js"></script> -->
<script defer src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="static/js/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="static/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>
演示站:
点我访问
源码使用方法:
1.上传到服务空间
2.首页头像图修改方法:依次打开以下目录 网站目录/static/images/background.jpg
background.jpg就是头像图片。上传你的头像图片到static/images/文件夹，删除源码自带头像图片，然后把你上传的图片命名为background.jpg然后就修改完成了。
3.修改首页信息，打开源码index.html修改里面对应首页显示的内容，修改完成后访问！页面没变化你可以换个浏览器访问或者是清除浏览器缓存刷新就能看到效果！
源码下载地址：
