这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
❤ 【作者主页——🔥获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 1.HTML代码
- 2.CSS代码
- 三、精彩专栏
一、网页介绍
1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html>
<!-- saved from url=(0033)http://www.duocoo.com/love/0o6o0/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>Since The Day</title>
<script src="./jscss/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).resize(function(){
console.log(parseInt(($(window).width() - $('.container').outerWidth())/2) + 'px');
$('.container').css({
position:'absolute',
left: ($(window).width() - $('.container').outerWidth())/2,
top: ($(window).height() - $('.container').outerHeight())/2
});
console.log($('.container').css('left'));
});
document.ready = function() {
$(window).resize();
updateNumbers();
};
function updateNumbers() {
//var start_time = 1253980800;
var beginTime = "2013-12-21 00:00:00";
var start_time = Date.parse(beginTime)
// var start_time = new Date("2014-11-11 10:10:10").Format("yyyy-MM-dd hh:mm:ss");
var duration = parseInt(Date.now()- start_time)/1000;
var seconds = parseInt( duration % 60);
if (seconds < 10)
seconds = "0" + seconds;
duration = parseInt(duration / 60);
var minutes = duration % 60;
if (minutes < 10)
minutes = "0" + minutes;
duration = parseInt(duration / 60);
var hours = duration % 24;
if (hours < 10)
hours = "0" + hours;
duration = parseInt(duration / 24);
var days = duration;
$('.days-number').text("" + days);
$('.seconds').text(hours + " hours " + minutes + " minutes " + seconds + " seconds");
setTimeout("updateNumbers()", 1000);
}
</script>
<!--[if lte IE 7]>
<script type="text/javascript" src="/static/js/degrade.js"></script>
<![endif]-->
</head>
<body style="background-color: #e7a3c1">
<div class="container" style="position: absolute; left: 482px; top: 181.5px;">
<div class="words"> 我爱你,月</div>
<div class="days">
<span class="days-number">1921</span>
<span class="days-label">days</span>
</div>
<div class="seconds">15 hours 24 minutes 30 seconds</div>
</div>
</body></html>
2.CSS代码
<style type="text/css">
.words {
font-size: 150px;
font-family: 'Regular', cursive;
width: auto;
text-align: center;
}
.days {
font-size: 216px;
font-family: 'Rye', cursive;
width: auto;
text-align: center;
}
.days-label {
font-size: 54px;
}
.seconds {
margin-top: 32px;
font-size: 32px;
font-family: "Monda_bo", Georgia, sans-serif;
width: auto;
text-align: center;
}
.seconds-label {
margin-top: 32px;
font-size: 32px;
font-family: "Monda_no", Georgia, sans-serif;
width: auto;
text-align: center;
}
.container {
position: absolute;
}
@font-face {
font-family: 'Regular';
font-style: normal;
font-weight: 400;
src: local('Rye Regular'), local('Rye-Regular'), url('./jscss/text1.ttf') format('woff');
}
@font-face {
font-family: 'Rye';
font-style: normal;
font-weight: 400;
src: local('Rye Regular'), local('Rye-Regular'), url('./jscss/Clockopia.ttf') format('woff');
}
@font-face {
font-family: 'Monda_no';
font-style: normal;
font-weight: normal;
src: local('Monda'), local('Monda-Regular'), url('./jscss/Monda-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Monda_bo';
font-style: normal;
font-weight: bold;
src: local('Monda Bold'), local('Monda-Bold'), url('./jscss/Monda-Bold.ttf') format('truetype');
}
</style>
三、精彩专栏
看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力
