600字范文 > HTML5七夕情人节表白网页(花瓣相册表白) HTML+CSS+JavaScript 求婚示爱代码 520情

HTML5七夕情人节表白网页(花瓣相册表白) HTML+CSS+JavaScript 求婚示爱代码 520情

时间：2019-03-29 22:46:04

HTML5七夕情人节表白网页❤花瓣图片表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。

🧡文章末尾-已经附上源码下载地址

🧡作者主页-更多源码

🧡100款七夕情人节告白源码-专栏文章

作品介绍

1.网页作品简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。

2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++）均可修改网页。

文章目录

HTML5七夕情人节表白网页❤花瓣图片表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、源码下载六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><html xmlns="/1999/xhtml" xml:lang="en" lang="en"><head><title>唯美 </title><meta name="keywords" content=" "><meta name="description" content=" "><meta name="author" content="www."><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="css/reset.css" type="text/css" media="all"><link rel="shortcut icon" href="index/images/favicon.ico"><link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen"><link rel="stylesheet" href="css/style.css" type="text/css" media="all"><link href="css/prettyPhoto.css" rel="stylesheet" /><script type="text/javascript" src="js/jquery.min.js" ></script><script type="text/javascript" src="js/content_switch.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script type="text/javascript" src="js/jquery.mousewheel.js"></script><script type="text/javascript" src="js/jquery-ui.js"></script><script type="text/javascript" src="js/cScroll.js"></script><script src="js/jquery.cycle.all.latest.js" type="text/javascript"></script><script src="js/jquery.color.js" type="text/javascript"></script><script type="text/javascript" src="js/script.js"></script><script type="text/javascript" src="js/functions.js"></script><script src="js/prettyPhoto.js"></script><body onpaste="return false" ondragstart="return false" onmouseover="window.status='';return true" oncopy="return false;"><frameset> <frame src="index.html"> </frameset><script> function stop(){alert('宝贝，我爱你！');return false; } document.oncontextmenu=stop; </script><body onselectstart="return false" onpaste="return false" oncopy="return false;" oncut="return false;" ></a><script>function checkhtml5(){if ($.browser.msie && parseInt($.browser.version, 10) < 9) {document.body.innerHTML="<div style=' clear: both; text-align:center; position: relative; height: 50px; margin-top: 30px; padding: 20px; background-color: red; color: white; font-size:20px;'>你的浏览器非常落后，不支持 HTML5!<br/>请使用 Chrome 14+/IE 9+/Firefox 7+/Safari 4+ 其中任意一款浏览器访问此页面。</a></div>";}}</script><style>a.wb_sina {float:left;margin-top:20px;margin-left:15px;display:inline-block;padding:4px 10px;border-radius:3px;background-color:#e55345;background-image:-moz-linear-gradient(top,#e96249,#e03c40);background-image:-ms-linear-gradient(top,#e96249,#e03c40);background-image:-webkit-gradient(linear,0 0,0 100%,from(#e96249),to(#e03c40));background-image:-webkit-linear-gradient(top,#e96249,#e03c40);background:url(./images/weibo.png) no-repeat 0 -20px;}#abox{position: fixed;_position: absolute;right: 15px;z-index: 99999999;}</style></head><body onLoad="checkhtml5()"><div id="abox"></div><div class="page_spinner"><div></div></div><div class="over"><div class="centre"><div class="main"><header><h1><span id="logo"><img src="images/logo1.png" alt="" usemap="#logo"></span></h1><nav class="menu"><ul id="menu"><li id="nav1"><img src="images/nav1.png" alt=""><span>爱的宣誓</span></li><li id="nav2"><img src="images/nav2.png" alt=""><span>恋爱历程</span></li><li id="nav3"><img src="images/nav3.png" alt=""><span>絮叨絮叨</span></li><li id="nav4"><img src="images/nav4.png" alt=""><span>祝福我们</span></li><li id="nav5"><img src="images/nav5.png" alt=""><span>爱的映像</span></li><li id="nav6"><img src="images/nav6.png" alt=""><span>时光沙漏</span></li></ul></nav><img src="images/spacer.gif" alt="" id="navigation" usemap="#navigation"><map name="navigation" class="navigation"></map><map name="logo" class="map_logo"></map></header><map name="back" class="map_back"></map><article id="content"><ul><li id="page_Home"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav1.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad"><h2>爱的宣誓</h2>人物：浟佳 & 宝贝<br />不在乎曾经拥有，只在乎天长地久。<br />爱，就要说出来！<br />再美好的回忆，也只是回忆；<br />再美丽的诺言，不到实现的那一刻，也只是一句空话。<br/>-- </div></li><li id="page_About"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav2.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad"><h2>恋爱历程</h2><div class="relative"><div class="scroll"><span>人物：浟佳 & 宝贝</span><p>    宝贝你还记得么？</p><p>    XX年X月X日。</p><p>    我们在xx相遇。</p><p>    然后.........</p><p>    过程.........</p><p>    我爱你，我会一直陪在你身边</p><p>    不离不弃</p><p>     - </p></div></div></div></li><li id="page_Talk"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav3.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad"><h2>絮叨絮叨</h2><div class="relative"><div class="scroll"><div style="width:100%;float: left; border-bottom: 1px solid #CCCCCC;">浟佳<br/><span style="float: right"> --by </span></div><div style="width:100%;float: left">分享我所知道的<br/><span style="float: right"> --by </span></div></div></div></div></li><li id="page_Message"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav4.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad"><h2>祝福我们</h2><div class="relative"><div class="scroll"><div style="min-height: 300px; padding-bottom: 50px;"><div class="ds-thread" data-thread-key="yyu" data-title="bb" data-url="http://"></div><script type="text/javascript"> var duoshuoQuery = {short_name:"love90"}; (function() {var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script></div></div></div></div></li><li id="page_Blog"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav5.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad"><h2>爱的映像</h2><div class="relative"><div class="scroll"><ul class="gallery fancybox"><li style="line-height:120px"><a href="images/uploadimage/imglsh001.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh001small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/imglsh001.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh001small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/img004.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img004small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/img004.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img004small.jpg" alt=""></a></li></ul></div></div></div></li><li id="page_Time"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav6.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad"><h2>时光沙漏</h2><div id="loveHeart" style="margin-top: 30px;font-size: 25px;"><span style="">宝贝你知道我爱你爱了多久了吗？</span><div id="elapseClock" style="margin: 10px 0px 10px 0px;"></div><img src="images/1.gif" /><img src="images/2.gif" /><br/><br/><div id="loveu">爱：从-2-6开始！<br/><div class="signature" style="float: right; margin-right: 50px;">by 浟佳 </div></div></div></div></div></li></ul></article></div></div><div class="bg1"><div class="main"><footer style="line-height:20px"><div id="copyright"><a href="" target=_blank></a> <a href="" target=_blank></a> <script language="JavaScript"></script></object></div></footer></div></div></div><script>$(window).load(function() {$('.page_spinner').fadeOut();$('body').css({overflow:'visible'});})</script><script type="text/javascript">//修改时光沙漏时间var offsetX = $("#loveHeart").width() / 2;var offsetY = $("#loveHeart").height() / 2 - 55;var together = new Date();together.setFullYear(, 02, 06);together.setHours(17);together.setMinutes(0);together.setSeconds(0);together.setMilliseconds(0);setTimeout(function () {adjustWordsPosition();startHeartAnimation();}, 3000);timeElapse(together);setInterval(function () {timeElapse(together);}, 500);adjustCodePosition();$("#code").typewriter();</script><audio id="bgmMusic" src="/51mp3ring_com2/at11121582079026.mp3" preload="auto" type="audio/mp3" autoplay loop></audio></div></body></html>