这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 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>

三、精彩专栏

看到这里了就【点赞，关注，收藏】三连支持下吧，你的支持是我创作的动力。

情人节程序员用HTML网页表白【爱的计时】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript相关推荐

100款 ❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 【建议收藏】
120款❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100 ...
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)...
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画海贼王作者是尾田荣一郎主页分为漫画简 ...
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画海贼王作者是尾田荣一郎主页分为漫画简 ...
web课程设计网页规划与设计~时尚服装购物商城模板html源码(HTML+CSS+JS)
HTML网页设计结课作业~橙色时尚服装购物商城模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等 ...
HTML5期末大作业：电商购物网站设计——易购电商购物网页设计与实现(31页) 含论文+答辩+PPT 计算机毕设网页设计源码 HTML+CSS+JavaScript web课程设计网页规划与设计...
HTML5期末大作业:电商网站设计--易购电商购物网页设计与实现(31页) 含论文+PPT 学生DW网页设计作业成品 HTML+CSS+JavaScript web课程设计网页规划与设计计算机毕设网 ...
情人节程序员用HTML网页表白【76-谢谢你的爱】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
情人节程序员用HTML网页表白【嫦娥奔月(满屏泡泡)】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
情人节程序员用HTML网页表白【制作属于我们的爱情相册网页】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
情人节程序员用HTML网页表白【爱心_文字音乐告白】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...

情人节程序员用HTML网页表白【爱的计时】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript