一款很好看的个人主页源码
源码介绍：源码添加了layer弹出层，pc端以窗口显示，手机端直接打开新页面！修改说明：首页图片修改style.css文件第5行和146行图片链接进行更换！更换网易云音乐歌单index.html大概66行的位置，修改data-id的值为你的网易云歌单ID！
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>兜帝的主页 | Doudi</title>
<meta name="description" content="这里是兜帝的个人主页，目前站长仍在学习中，每天抽出时间来看书学习，励志成为一个技术很牛的程序员。">
<meta name="keywords" content="兜帝的主页,个人主页,程序员">
<link rel="icon" type="image/ico" href="//gravatar.loli.net/avatar/4cc893d113dd74ceca73f9863f2c5446/">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
</head>
<body>
<div id="main">
<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>If the moon smiled, she would resemble you.<br> 如果月亮会笑，那么她一定像你一样美！
</p>
<p>Catch me:</p>
<div>
<a href="https://www.doudiblog.cn/" id="XBin-blog-a" target="_blank" class="btn btn-primary col-lg-4">BLOG</a>
<a href="https://www.doudiblog.cn/" target="_blank" class="btn btn-secondary col-lg-4">官网</a>
<a href="https://www.doudiblog.cn/" target="_blank" id="XBin-mail-a" class="btn btn-success col-lg-4">微博</a>
</div>
<h4>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>
<footer>
<p>Copyright 2020 - Now <a href="https://www.doudiblog.cn/" target="_blank">兜帝网络</a> <a href="http://beian.miit.gov.cn/" target="_blank">琼ICP备2021000736号-1</a>
<br> 鸣谢：
<a href="https://www.doudiblog.cn/" target="_blank" rel="nofollow">中国免网</a>
</p>
</p>
</footer>
</div>
</div>
</div>
<div id="aplayer" data-order="random" data-id="20173709" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-volume="0.8"></div>
<!-- aplayer -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
<!-- end_aplayer -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script defer src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/XBin/XBin@master/layer/layer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/XBin/XBin@master/js/v3.js"></script>
<script>
//弹出一个页面层
$('#XBin-blog').on('click', function() {
layer.open({
type: 2,
title: '兜帝网络',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['80%', '100%'],
content: '//www.doudiblog.cn'
});
});
$('#XBin-mail').on('click', function() {
layer.open({
type: 2,
title: '兜帝网络',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['80%', '100%'],
content: '//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email1.cn'
});
});
</script>
</html>body {
font-size: 18px;
color: #6c767d;
background-color: #ebf1f5;
background-image: url(https://cn01.img.twinkle222.cn/imgs/2020/03/f735a00354a3c282.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
min-height: 800px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 5px;
/* height: 5px; */
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
h1 {
font-size: 36px;
margin-bottom: .5em;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
margin-top: 1em;
}
h4 {
font-size: 16px;
}
h1,
h2,
h3,
h4 {
color: black;
}
.card {
border: none;
padding: 80px 80px 0px;
border-radius: 0;
}
.container {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.my-card {
/* box-shadow: 0px 5px 15px 5px rgb(203, 221, 232); */
}
strike {
color: red;
}
.btn {
border-radius: 0;
margin: 5px 0;
width: 100%;
padding: 12px 40px;
transition: ease;
}
.btn-primary {
/* box-shadow: 0px 5px 15px 5px rgb(203, 221, 232); */
padding: 12px 40px;
transition: ease;
}
.btn-primary:hover {
box-shadow: 5px -2px 15px 0px rgb(203, 221, 232);
}
.btn-secondary {
/* box-shadow: 0px 5px 15px 5px rgb(203, 221, 232); */
padding: 12px 40px;
transition: ease;
}
.btn-secondary:hover {
box-shadow: 5px -2px 15px 0px rgb(203, 221, 232);
}
.btn-success {
/* box-shadow: 0px 5px 15px 5px rgb(203, 221, 232); */
padding: 12px 40px;
transition: ease;
}
.btn-success:hover {
box-shadow: 5px -2px 15px 0px rgb(203, 221, 232);
}
.social {
padding-left: 0;
}
.social p {
margin-bottom: 0;
}
.social li {
list-style: none;
float: left;
margin-right: 15px;
}
.card-text {
margin-bottom: 20px;
}
.social .fa {
font-size: 24px;
}
.photo-bg {
/* background-image: url(assets/background.jpg); */
background-image: url(https://tva1.sinaimg.cn/large/0072Vf1pgy1foxk456b0fj31hc0u0dxu.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
footer p {
font-size: 12px;
}
#kaygb-blog-a,
#kaygb-mail-a {
display: none;
}
@media (max-width: 1199px) {
body {
min-height: 600px;
}
h1 {
font-size: 24px;
}
h2,
.social .fa {
font-size: 20px;
}
h3 {
font-size: 16px;
}
h4,
p {
font-size: 14px;
}
.card {
padding: 50px 50px 0px;
}
}
@media (max-width: 1199px) {
.photo-bg {
min-height: calc(100vh - 500px);
}
}
@media(max-width:991px) {
.photo-bg {
background-position: top;
min-height: calc(90vh - 440px);
}
}
@media(max-width: 767px) {
.container {
position: relative;
top: 0;
transform: translateY(0);
}
.photo-bg {
height: 180px;
}
.card {
padding: 20px;
}
#kaygb-blog-a,
#kaygb-mail-a {
display: block;
}
#kaygb-blog,
#kaygb-mail {
display: none;
}
}
#frame {
width: 50%;
height: 50vh;
margin: 0;
background: #fff;
position: fixed;
z-index: 999;
top: 5%;
left: 5%;
}
#aplayer {
z-index: 20000000;
}个人主页源码密码：edca|大小：4KB
已经过安全软件检测无毒，请您放心下载。
