这是程序员表白系列中的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代码
代码如下（示例）：以下仅展示部分代码供参考~
<!--* @Author: your name* @Date: -06-11 11:26:48* @LastEditTime: -06-11 11:27:34* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \03\index.html--><!DOCTYPE HTML><html xmlns="/1999/xhtml" xml:lang="en" lang="en"><head><meta name="keywords" content="" /><meta name="description" content="" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="static/css/default.css" type="text/css" rel="stylesheet"><link href="static/css/audioAutoPlay.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="static/js/jquery.js"></script><script type="text/javascript" src="static/js/garden.js"></script><script type="text/javascript" src="static/js/functions.js"></script><title>XX，我爱你 </title><body><img id="music_ico" onclick="clickMusic()" src="static/image/music_ico.png" alt=""><audio id="audio" style="display: none;" src="static/music/bg_music.mp3" preload="auto" loop="loop"></audio><div id="mainDiv"><div style="height: 100%"><div id="loveHeart"><canvas id="garden"></canvas><div id="words"><div id="messages">XX, 这是我们认识的第<div id="elapseClock"></div></div><div id="loveu">永远爱你，一辈子，不分离！<br/><div class="signature">- 最爱你的人</div></div></div></div><div id="code"><span class="comments">XX：</span><br /><span class="space" /><span class="comments">我爱你</span><br /><span class="space" /><span class="comments">只有在你的微笑里，我才有呼吸，还贪恋着你的风情，诱惑着你的神秘，埋葬了我的爱情，脉脉之情如一溪春水，快刀难斩断，随着天各一方的时间越来越长，我的思念也越来越深，我很想找一个万籁俱寂的深夜或一个阳光明媚的早晨，把许多心底的惆怅、寂寞向你倾诉。某某，我们的故事是最感人，最真实的，早安，我永恒的爱人，虽然我尚未起床，但思想已经飞到你的身边来了，不管今世也好来世也好，我所要的只有你。我要与你同坐在有着月光的草坪上，一起遥望着繁星点缀的夜空，讲述那人间古老的爱情神话。人生不止，寂寞不已。寂寞人生爱无休，寂寞是爱永远的主题。</span><br /><span class="space" /><span class="comments">某某，在这没有月的漆黑的夜里，我独自坐在窗前写着这封信，希望睡前可以吻你；希望睡时可以抱着你；希望醒来可以看到你，有你的日子，一切都是那么美好，风和日丽，鲜花遍地；没你的日子，白昼是那么的黯淡，黑夜是那么的漫长。你的话已经锁在我的记忆里了，那钥匙你就替我保管一辈子吧。如果你冷，我将你拥入怀中；如果你哭，我替你擦去泪痕。你像那天边的云，飘泊不定，叫人难以追寻；你像那水中的萍，流移四方，叫我难以琢磨。这样的习惯也是一种甜蜜的负担，思念你早已成为我生活中不可缺少的习惯。思念就像河流般，滔滔不绝地流向大海，流向我的心房，当我闭上双眼，你的身影又浮现在我的眼前，一些路我们并肩走过，一些故事我们就是主人公，一首歌我们对唱了那么久，永远不变的是心中深藏的对爱的执着。如果，我只有一天的生命，我会去找你，并告诉你，我是如此的依恋你。我们那两颗充满柔情和陶醉的心永远在一起，我愿做天上的星星，给你永恒的光芒，永远守候在你身边。盼你在每一次想你的瞬间，爱你在每一秒呼吸的间隙。不知为什么，只要有你在我身边，我的心便不再惶惶不安。有你的日子你就是一切，没你的日子一切都是你。某某，我想告诉你，自从有了你，我觉得整个世界都在向我点头微笑，你那充满朝气的身影总是伴着月光入我梦来，让我牵挂不停。还记得我俩的初遇。那一瞬间，时间就像静止了一般，你的气质让我觉得惊喜，认识你我的生活充满生机，爱上你我的生活充满激情。</span><br /><span class="space" /><span class="comments">某某，保留一个最浪漫的故事，给你一声祝福，一个kiss，爱你直到永远！某某，理解我吗？我不是弱智，但我会傻傻的爱你到永远。某某，我只想和你白头到老，美轮美奂的你编织着神话，创造着奇迹，只因让我遇到你。接受我，好吗？</span><br /></div></div></div></body><script type="text/javascript" src="static/js/audioAutoPlay.js"></script><script type="text/javascript" src="static/js/default.js"></script><style></style></html>
2.CSS代码
body {margin: 0;padding: 0;background: #ffe;font-size: 12px;overflow: auto}#mainDiv {width: 100%;height: 100%}#loveHeart {padding-left: 10%;float: none;margin: 10% auto;width: 670px;height: 625px}#garden {width: 100%;height: 100%}#elapseClock {text-align: right;font-size: 18px;margin-top: 10px;margin-bottom: 10px}#words {font-family: "sans-serif";width: 505px;font-size: 24px;color: #666}#messages {display: none}#elapseClock .digit {font-family: "digit";font-size: 36px}#loveu {padding: 5px;font-size: 22px;margin-top: 80px;margin-right: 120px;text-align: right;display: none}#loveu .signature {margin-top: 10px;font-size: 20px;font-style: italic}#code {float: none;margin: 0 auto;width: 440px;height: 400px;'' color: #333;font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", "sans-serif";font-size: 18px;}#code .string {color: #2a36ff}#code .keyword {color: #7f0055;font-weight: bold}#code .placeholder {margin-left: 15px}#code .space {margin-left: 23px}#code .comments {color: palevioletred}#copyright {margin-top: 10px;text-align: center;width: 100%;color: #666}#errorMsg {width: 100%;text-align: center;font-size: 24px;position: absolute;top: 100px;left: 0}#copyright a {color: #666}
三、精彩专栏
看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。
情人节程序员用HTML网页表白【爱心_文字音乐告白】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
