情侣空间单页源代码分享

作者 : 狸猫 本文共3066个字,预计阅读时间需要8分钟 发布时间: 2020-05-15 共97人阅读

大概就是这个样式,只有ui,需要的话功能自己写即可,

头像调用http://q.qlogo.cn/headimg_dl?dst_uin=QQ号&spec=100&t=QQ号

情侣空间单页源代码分享

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<style type="text/css">
body{width: 100%;height: 100%;margin: 0;padding: 0;}
body, .p1, .p2 {font-family: "Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif;line-height: 24px;font-size: 20px;}
.bg{background-image: url('https://ae01.alicdn.com/kf/Ha2a69c9d2f3e41078c9ce486c7a9a2cbZ.png');background-size: 100%;height: 736px;margin: 0 auto;float: none;}
.avatar{padding: 294px 29px 120px 29px;}
.avatar img{width: 99px;height: 99px;border-radius:100%;border: solid 5px rgba(255, 255, 255, 0.5);}
.avatar #nan{float: left;}
.avatar #nv{float: right;}
.text-center{text-align: center;}
.btn{color: #fff;font-size: 24px;padding: 10px 120px;border: 1px solid #f8f8f8;border-radius: 10px;}
.btn:hover{background: #9B59B6; border: 0 none;color: #fff;}
.btn:visited {color: #fff;border: 1px solid #f8f8f8;}
.btn:active{background: #1BA1E2; border: 0 none;color: #fff;}
</style>
<!--AEINK出品-->
</head>

<body>
<div class="layui-row"> 
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 bg float-center">
<div class="avatar">
<img id="nan" src="http://q.qlogo.cn/headimg_dl?dst_uin=3168410561&spec=100&t=3168410561">
<img id="nv" src="http://q.qlogo.cn/headimg_dl?dst_uin=3168410561&spec=100&t=3168410561">
</div>
<div class="text-center"><p>我们相恋了</p><p id="elapseClock"></p></div>
<div class="text-center" style="margin-top: 120px;">
<a class="btn">甜蜜双击</a>
</div>
</div>
</div>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=5VYBZ-G2KH3-BJ332-3NPKN-JUNNJ-ZHBQE&referer=优启梦用户探测"></script>
<!--您的Layui代码start-->
<script type="text/javascript">
layui.use(['layer'], function() {
var $ = layui.$
,layer = layui.layer;

$(document).ready(function() {
layer.msg('欢迎来到我们的小窝!');
var together = new Date();
together.setFullYear(2020,4,14); //时间年月日
together.setHours(2); //小时 
together.setMinutes(2); //分钟
together.setSeconds(0); //秒前一位
together.setMilliseconds(0); //秒第二位

timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 1000);

$('.btn').click(function(event) {
console.log('test');
layer.msg('没写剩下的功能!!!');
//window.location.href='https://www.12580sky.com';
});

});
var geolocation = new qq.maps.Geolocation();
var options = {timeout: 3000};
console.log(_DEFAULT_CITY);
function timeElapse(date){
var current = Date();
var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
var days = Math.floor(seconds / (3600 * 24));
seconds = seconds % (3600 * 24);
var hours = Math.floor(seconds / 3600);
if (hours < 10) {
hours = "0" + hours;
}
seconds = seconds % 3600;
var minutes = Math.floor(seconds / 60);
if (minutes < 10) {
minutes = "0" + minutes;
}
seconds = seconds % 60;
if (seconds < 10) {
seconds = "0" + seconds;
}
var result = "<span class=\"digit\">" + days + "</span> 天 <span class=\"digit\">" + hours + "</span> 时 <span class=\"digit\">" + minutes + "</span> 分 <span class=\"digit\">" + seconds + "</span> 秒..."; 
$("#elapseClock").html(result);
}
});
</script>
</body>

</html>

狸猫博客 » 情侣空间单页源代码分享

常见问题FAQ

狸猫博客的会员值得开吗?
狸猫博客的所有资源都是站长狸猫亲自测试,每天更新不多,但是保证都能使用