这是程序员表白系列中的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代码

代码如下（示例）：以下仅展示部分代码供参考~

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>I Love You Forever</title><meta name="author" content="Mike"><link rel="stylesheet" href="css/style.css" type="text/css" media="all"><!--导库--><script type="text/javascript" src="js/jquery.js"></script><!-- 图片幻灯片效果--><script type="text/javascript" src="js/roundabout.js"></script><script type="text/javascript" src="js/roundabout_shapes.js"></script><script type="text/javascript" src="js/gallery_init.js"></script><!-- 下雪--><script type="text/javascript" src="js/snowstorm.js"></script><!-- 打字机效果-->       <script type="text/javascript" src="js/text.js"></script><!-- 画爱心--><script type="text/javascript" src="js/ga.js" async=""></script><script type="text/javascript" src="js/heart.js"></script><!-- 移动div--><script type="text/javascript" src="js/move.js"></script><!-- 显示时间 --><script type="text/javascript" src="js/time.js"></script><!-- 设置文字跟随鼠标 --><script type="text/javascript" src="js/makesnake.js"></script></head><body><!-- thanks for watching! --><span id="span0" class="spanstyle">T</span><span id="span1" class="spanstyle">h</span><span id="span2" class="spanstyle">a</span><span id="span3" class="spanstyle">n</span><span id="span4" class="spanstyle">k</span><span id="span5" class="spanstyle">s</span><span id="span6" class="spanstyle"></span><span id="span7" class="spanstyle">f</span><span id="span8" class="spanstyle">o</span><span id="span9" class="spanstyle">r</span><span id="span10" class="spanstyle"> </span><span id="span11" class="spanstyle">w</span><span id="span12" class="spanstyle">a</span><span id="span13" class="spanstyle">t</span><span id="span14" class="spanstyle">c</span><span id="span15" class="spanstyle">h</span><span id="span16" class="spanstyle">i</span><span id="span17" class="spanstyle">n</span><span id="span18" class="spanstyle">g</span><span id="span19" class="spanstyle">!</span><script type="text/javascript">setTimeout(makesnake, 42000);</script><!--#Header--><div id="header" style="opacity:0.85"><div id="title">I Love You Forever</div></div><!-- #myContent --><div id="myContent"><span id="blink" style="display: none;">_</span></div><div id="contentToWrite" style="display:none">一时间不知道从哪说起,         <br>真爱来了，我们要好好把    <br>一时间不知道从哪说起,         <br>真爱来了，我们要好好把握。不管面临多大的压力，<br>不管前面的路如何崎岖.<br>不管经历过什么,我仍坚信最浪漫的事就是和<br>你一起慢慢变老.<br>还记得否,曾经的点点滴滴，从相识到现在，<br>从冷漠到关心,从谢绝到依赖，从生疏到相爱,<br>一切似乎都是那么遥远,又似乎那么触手可及.<br>正如某人说的那样,但求岁月静好,现世安稳.<br>一生守候不是一句简单而苍白的山盟海誓，<br>而是无数个平淡的日子同舟共济，相濡以沫.<br>相信右下角的计时器,将永远继续下去,直至数据溢出.<br><br>-----------------------Just for You, YaRu<br></div><script type="text/javascript">writeContent(true);</script><!-- #container --><div id="container"><ul id="myRoundabout" class="roundabout-holder" style="padding: 0px; position: relative; z-index: 100;"><li class="roundabout-moveable-item roundabout-in-focus" current-scale="1.0000" style="position: absolute; left: 122px; top: 87px; width: 350px; height: 222px; opacity: 1; z-index: 400; font-size: 16px;"><img src="img/1.jpg" alt=""></li><li class="roundabout-moveable-item" current-scale="0.7927" style="position: absolute; left: -0.4px; top: 110px; width: 277.445px; height: 175.9794px; opacity: 1; z-index: 296; font-size: 12.68px;"><img src="img/2.jpg" alt=""></li><li class="roundabout-moveable-item" current-scale="0.4573" style="position: absolute; left: 473.8px; top: 147.2px; width: 160.055px; height: 101.5206px; opacity: 1; z-index: 129; font-size: 7.32px;"><img src="img/3.jpg" alt=""></li><li class="roundabout-moveable-item" current-scale="0.4573" style="position: absolute; left: -39.8px; top: 147.2px; width: 160.055px; height: 101.5206px; opacity: 1; z-index: 129; font-size: 7.32px;"><img src="img/4.jpg" alt=""></li><li class="roundabout-moveable-item" current-scale="0.7927" style="position: absolute; left: 317px; top: 110px; width: 277.445px; height: 175.9794px; opacity: 1; z-index: 296; font-size: 12.68px;"><img src="img/5.jpg" alt=""></li></ul></div><script type="text/javascript">setTimeout(move, 15000);</script><!-- #bg --><div id="bg"><canvas id="garden" width="1583" height="709"><c style="color: #FFF; text-shadow:2px 3px 3px #222; font-family:Microsoft YaHei; font-size:50px">你的浏览器过时了,试试火狐吧!</c></canvas></div><!-- #time --><div id="time"><span id="show"></span><script type="text/javascript">setTimeout("showTime()", 40000);</script></div></body>

2.CSS代码

/* Global properties ======================================================== */
body { background:#6f599c;background-image:url(../images/bg.jpg) ;text-align:left;
}/* Global Structure ============================================================= */
/* Header */
#header{position:absolute;left:0px;top:5px;overflow:hidden;height:70px;font-family:Microsoft YaHei;font-weight: 900;font-size:40px;padding-bottom:5px;width: 100%;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;
}#myContent{position:absolute;left:80px;top:130px;overflow:hidden;text-shadow: 2px 3px 3px #000; font-family:Microsoft YaHei;font-style:italic;font-weight:500;font-size:20px;color:#CCCCCC;
}#container{overflow:hidden;position:absolute;left:630px;top:220px;width:650px;opacity:0;filter:alpha(opacity=0.7)
}#title{position:absolute;left:28%;top:0px;padding:10px;overflow:hidden;text-shadow: 2px 3px 3px #222; color:#CCCCCC;
}#footer {position:absolute;left:32%;top:91%;overflow:hidden;text-shadow: 2px 3px 3px #222; font-family:Microsoft YaHei;font-style:italic;font-size:20px;color:#CCCCCC;
}#time{position:absolute;left:750px;top:400px;overflow:hidden;
}#show{color:#CCCCCC;text-shadow: 2px 3px 3px #222; font-family:Microsoft YaHei;font-style:italic;font-size:20px;
}#bg{overflow:hidden;
}.roundabout-holder  { width:600px;height:400px;margin:0 auto;
}
.roundabout-moveable-item {width: 350px;height: 222px;cursor: pointer;border:3px solid #ccc;border:3px solid rgba(0, 0, 0, 0.08);border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;
}
.roundabout-moveable-item img{width:100%;
}
.roundabout-in-focus {border:3px solid rgba(0, 0, 0, 0.2);
}ol, ul {list-style: none;
}img {vertical-align:top;
}.spanstyle{color:#CCFF99;font-family:courier;text-shadow: 2px 2px 1px #222; font-style:italic;font-weight:600;font-size:20px;position:absolute;        /* ç»å¯¹å®šä½ */top:-50px;overflow:hidden;
}

三、精彩专栏

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

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

情人节程序员用HTML网页表白【爱的计时】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
100款 ❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 【建议收藏】
120款❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100 ...
python程序员专用壁纸_程序员炫技必备：用Python生成马赛克画！（文末附源码）...
原标题:程序员炫技必备:用Python生成马赛克画!(文末附源码) 源 | Python与数据分析文 | 强哥大家知道马赛克画是什么吗?不是动作片里的马赛克哦~~ 马赛克画是一张由小图拼成的大图,本 ...
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)...
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画海贼王作者是尾田荣一郎主页分为漫画简 ...
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画海贼王作者是尾田荣一郎主页分为漫画简 ...
HTML5期末大作业：电商购物网站设计——易购电商购物网页设计与实现(31页) 含论文+答辩+PPT 计算机毕设网页设计源码 HTML+CSS+JavaScript web课程设计网页规划与设计...
HTML5期末大作业:电商网站设计--易购电商购物网页设计与实现(31页) 含论文+PPT 学生DW网页设计作业成品 HTML+CSS+JavaScript web课程设计网页规划与设计计算机毕设网 ...
情人节程序员用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
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...

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