程序员专属情人节表白网站(html+css+js邀请函网站制作)
❤ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
web前端期末大作业： 【HTML5网页期末作业 (1000套) 】
程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
二、网站介绍
网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2） css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3） js文件包含：页面炫酷效果实现
三、网站效果
▶️1.视频演示
2.图片演示
四、 网站代码
HTML结构代码
<!doctype html> <!-- COPYRIGHT by avenjan e-mail:avenjan@gmail.com Free to use this as you like --> <html class="no-js" lang="zh_cn"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"><!-- Page Title Here --><title>婚礼庆典 | 邀请函模板</title><!-- Page Description Here --><meta name="description" content="A responsive coming soon template, un template HTML pour une page en cours de construction"><!-- Disable screen scaling--><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0"><!-- Place favicon.ico and apple-touch-icon(s) in the root directory --><!-- Initializer --><link rel="stylesheet" href="css/normalize.css"><!-- Web fonts and Web Icons --><link rel="stylesheet" href="css/pageloader.css"><link rel="stylesheet" href="fonts/opensans/stylesheet.css"><link rel="stylesheet" href="fonts/asap/stylesheet.css"><link rel="stylesheet" href="css/ionicons.min.css"><!-- Vendor CSS style --><link rel="stylesheet" href="css/foundation.min.css"><link rel="stylesheet" href="js/vendor/jquery.fullPage.css"><link rel="stylesheet" href="js/vegas/vegas.min.css"><!-- Main CSS files --><link rel="stylesheet" href="css/main.css"><link rel="stylesheet" href="css/main_responsive.css"><link rel="stylesheet" href="css/style-color1.css"><script src="js/vendor/modernizr-2.7.1.min.js"></script><style> #jp_container_1 { position: fixed; top: 5%; left: 2% } #jp_container_1 a { font-size: 26px; color: #ffffff } #jp_container_1 a:hover { color: #f4645f } </style></head><body id="menu" class="alt-bg"> <!--[if lt IE 8]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Page Loader --> <div class="page-loader" id="page-loader"> <div><i class="ion ion-loading-d"></i> <p>美丽值得期待...</p> </div> </div> <!-- BEGIN OF site cover --> <div class="page-cover" id="s-cover"> <!-- Cover Background --> <div class="cover-bg pos-abs full-size bg-img" data-image-src="img/bg-slide3.jpg"></div> <!-- BEGIN OF Slideshow Background --> <div class="cover-bg pos-abs full-size slide-show"> <i class='img' data-src='img/bg-slide3.jpg'></i> <i class='img' data-src='img/bg-slide2.jpg'></i> <i class='img' data-src='img/bg-slide1.jpg'></i> </div> <!-- END OF Slideshow Background --> <div class="cover-bg-mask pos-abs full-size bg-color" data-bgcolor="rgba(0, 0, 0, 0.41)"></div> </div> <!--END OF site Cover --> <!-- Begin of timer pane --> <div class="pane-when " id="s-when"> <div class="content"> <!-- Clock --> <div class="clock clock-countdown"> <div class="site-config" data-date="1/15/2018 14:00:00" data-date-timezone="+8" ></div> <div class="elem-center"> <div class="digit"> <span class="days">81</span> <span class="txt">天</span> </div> </div> <div class="elem-bottom"> <div class="deco"></div> <!--<span class="days">12</span><span class="thin">D</span>--> <span class="hours">18</span><span class="thin">小时</span> <span class="minutes">45</span><span class="thin">分钟</span> <span class="seconds">36</span><span class="thin">秒</span> </div> </div> <footer> <p>2018年 <strong>1月15日</strong></p> </footer> </div> </div> <!-- End of timer pane --> <!-- BEGIN OF site main content content here --> <main class="page-main" id="mainpage"> <!-- Begin of home page --> <div class="section page-home page page-cent" id="s-home"> <!-- Content --> <section class="content"> <header class="header"> <div class="h-left"> <h2>诚邀<strong>见证</strong></h2> </div> <div class="h-right"> <h3>韩梅梅 & <br> 李雷</h3> <h4 class="subhead"><a href="#register">婚礼庆典</a></h4> </div> </header> </section> <!-- Scroll down button --> <footer class="p-footer p-scrolldown"> <a href="#register"> <div class="arrow-d"> <div class="before">Scroll</div> <div class="after">Down</div> <div class="circle"><i class="ion ion-mouse"></i></div> </div> </a> </footer> </div> <!-- End of home page --> <!-- Begin of register page --> <div class="section page-register page page-cent" id="s-register"> <section class="content"> <header class="p-title"> <h3>庆宴时间：<i class="ion ion-compose"></i></h3> <h4 class="subhead">2018年1月15日</h4> </header> <div> <form id="mail-subscription" class="form magic send_email_form" method="get" action="ajaxserver/serverfile.php"> <p class="invite"><br/> 请在下方输入到场宾客姓名我们将提前为您安排坐席：</p> <div class="fields clearfix"> <div class="input"> <label for="reg-email">姓名： </label> <input id="reg-email" class="email_f" name="email" type="text" required placeholder="嘉宾姓名" data-validation-type="text"> </div> <div class="buttons"> <button id="submit-email" class="button email_b" name="submit_email">确认</button> </div> </div> <p class="email-ok invisible"><strong>等一场千年雨歇，侯一人如约而至！</strong> </p> </form> </div> </section> <footer class="p-footer p-scrolldown"> <a href="#about-us"> <div class="arrow-d"> <div class="before">About</div> <div class="after">Lorem</div> <div class="circle"><i class="ion ion-mouse"></i></div> </div> </a> </footer> </div> <!-- End of register page --> <!-- Begin of about us page --> <div class="section page-about page page-cent" id="s-about-us"> <section class="content"> <header class="p-title"> <h3>关于我们 <i class="ion ion-android-information"> </i> </h3> <h4 class="subhead">于千万人之中/与你遇见，与千万年之中，在时间无涯的荒野里，没有早一步，也没有晚一步，我们，刚巧遇上……</h4> </header> <!--article class="text"> <p>花径不曾缘客扫，蓬门今始为君开。 </p> <p>盘飧市远无兼味，樽酒家贫只旧醅。 </p> </article--> </section> <footer class="p-footer p-scrolldown"> <a href="#contact"> <div class="arrow-d"> <div class="before">Contact</div> <div class="after">Message</div> <div class="circle"><i class="ion ion-mouse"></i></div> </div> </a> </footer> </div> <!-- End of about us page --> <!-- Begin of Contact page --> <div class="section page-contact page page-cent bg-color" data-bgcolor="rgba(95, 25, 208, 0.88)s" id="s-contact"> <!-- Begin of contact information --> <div class="slide" id="s-information" data-anchor="information"> <section class="content"> <header class="p-title"> <h3>地址<i class="ion ion-location"> </i> </h3> <ul class="buttons"> <li class="show-for-medium-up"> <a title="About" href="#about-us" ><i class="ion ion-android-information"></i></a> </li> <!--<li><a title="Contact" href="#contact/information"><i class="ion ion-location"></i></a></li>--> <li> <a title="Message" href="#contact/message"><i class="ion ion-email"></i></a> </li> </ul> </header> <!-- Begin Of Page SubSction --> <div class="contact"> <div class="row"> <div class="medium-6 columns left"> <ul> <li> <h4>宴会地点：</h4> <p>康城建国国际酒店</p> </li> <li> <h4>地址：</h4> <p>人民东路618号 <br> 人民东路与交通西路交汇处</p> </li> <li> <h4>酒店电话</h4> <p> 010-2088888</p> </li> </ul> </div> <div class="medium-6 columns social-links right"> <ul> <!-- legal notice --> <li class="show-for-medium-up"> <h4>查看地图</h4> <p><a href="http://map.baidu.com/?newmap=1&s=inf%26uid%3Da61500c52fa38761f72310b0%26wd%3D%E5%BA%B7%E5%9F%8E%E5%9B%BD%E9%99%85%26all%3D1%26c%3D86&from=alamap&tpl=map_singlepoint" target="_blank">点击查看在线地图</a></p> </li> <!--li class="show-for-medium-up"><h4>Find us on</h4><!-- Begin of Social links --> <!--div class="socialnet"><a href="#"><i class="ion ion-social-facebook"></i></a><a href="#"><i class="ion ion-social-instagram"></i></a><a href="#"><i class="ion ion-social-twitter"></i></a><a href="#"><i class="ion ion-social-pinterest"></i></a><a href="#"><i class="ion ion-social-tumblr"></i></a></div><!-- End of Social links --> </li> <li> <!--p><img src="img/logo_large.png" alt="Logo" class="logo"></p--> <p class="small"><strong>期待您的到场！</strong></p> </li> </ul> </div> </div> </div> <!-- End of page SubSection --> </section> </div> <!-- end of contact information --> <!-- begin of contact message --> <div class="slide" id="s-message" data-anchor="message"> <section class="content"> <header class="p-title"> <h3>宾客寄语：<i class="ion ion-email"> </i> </h3> <ul class="buttons"> <li class="show-for-medium-up"> <a title="About" href="#about-us"><i class="ion ion-android-information"></i></a> </li> <li> <a title="Contact" href="#contact/information"><i class="ion ion-location"></i></a> </li> <!--<li><a title="Message" href="#contact/message"><i class="ion ion-email"></i></a></li>--> </ul> </header> <!-- Begin Of Page SubSction --> <div class="page-block c-right v-zoomIn"> <div class="wrapper"> <div> <form class="message form send_message_form" method="get" action="ajaxserver/serverfile.php"> <div class="fields clearfix"> <div class="input"> <label for="mes-name">姓名</label> <input id="mes-name" name="name" type="text" placeholder="您的名字" required> </div> <div class="buttons"> <button id="submit-message" class="button email_b" name="submit_message">发送</button> </div> </div> <div class="fields clearfix"> <div class="input"> <label for="mes-email">邮箱： </label> <input id="mes-email" type="email" placeholder="邮箱地址" name="email" required> </div> </div> <div class="fields clearfix no-border"> <label for="mes-text">留言： </label> <textarea id="mes-text" placeholder="您写下的祝福将被送出" name="message" required></textarea> <div> <p class="message-ok invisible">您的祝福已经送出，谢谢！.</p> </div> </div> </form> </div> </div> </div> <!-- End Of Page SubSction --> </section> </div> <!-- End of contact message --> </div> <!-- End of Contact page --> </main> <script src="js/jquery.min.js"></script> <!-- All vendor scripts --> <script src="js/vendor/all.js"></script> <!-- Downcount JS --> <script src="js/jquery.downCount.js"></script> <!-- Form script --> <script src="js/form_script.js"></script> <!-- Javascript main files --> <script src="js/main.js"></script> <script type="text/javascript" src="js/jquery.jplayer.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3: "music.mp3", }).jPlayer("play"); }, ended: function() { // The $.jPlayer.event.ended event $(this).jPlayer("play"); // Repeat the media }, swfPath: "/js", supplied: "mp3" }); }); </script> <div id="jquery_jplayer_1"></div> <div id="jp_container_1"> <a href="#" class="jp-play"> <li class="ion-music-note" data-pack="default" data-tags="songs"></li> </a> <a href="#" class="jp-pause"> <li class="ion-headphone" data-pack="default" data-tags="music, earbuds, beats"></li> </a> </div> </body> </html> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
CSS样式代码
.quick-link li::before { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .page .content .subhead a { color: #1d1d1d; background: #fff; display: inline-block; padding: 0 8px;padding-bottom: 1px; /* line-height: ;*/ } .page-cent .p-title h3 { border-bottom-color: rgba(255, 255, 255, 0.2); } .page .form button { background: #fff;color: #1d1d1d; } .page .form button:hover { background: #1d1d1d;color: #ffffff; } .page .form button:after{background: #1d1d1d; } .page .form .fields{ border-bottom-color: #ffffff; } .quick-link a:hover:after{background: #1d1d1d; } 123456789101112131415161718192021222324252627282930313233343536
五、更多源码
1.如果我的博客对你有帮助 请 “点赞” “✍️评论” “收藏” 一键三连哦！
2.【关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
以上内容技术相关问题欢迎一起交流学习
相关知识
520表白网页,程序员浪漫表白,求婚倒计时网站制作 HTML+CSS+JS
125款程序员专属情人节表白网站【建议收藏】HTML+CSS+JavaScript (1)
HTML5七夕情人节表白网页制作【css求婚动画源码】HTML+CSS+JavaScript 程序员表白代码
HTML5七夕情人节表白网页制作 (浪漫的求婚动画) HTML+CSS+JavaScript
大学生网页设计作业 html+css+js网上鲜花售卖网站(期末网页设计作业)
用DIV+CSS技术设计的鲜花网站（web前端网页制作课作业）
都8102年了，七夕还不知道送什么？收下这个表白网站
100款 ❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 【建议收藏】
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
HTML5七夕情人节表白网页制作【HTML5庆祝生日蛋糕烟花特效】HTML+CSS+JavaScript
网址: 程序员专属情人节表白网站(html+css+js邀请函网站制作) https://m.huajiangbk.com/newsview795044.html
| 上一篇: 100款程序员专属情人节生日表白 |
下一篇: 准备向喜欢的男生表白买什么花 |
