这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
❤ 【作者主页——获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——毕设项目精品实战案例】
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码
,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑:任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
代码如下(示例):以下仅展示部分代码供参考~
DOCTYPE HTML>
<html xmlns="http://www.w3.org/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>
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
}
看到这里了就 【点赞,好评,收藏】
三连 支持下吧,你的支持是我创作的动力