情人节程序员用HTML网页表白【告白模板】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
一、网页介绍
1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>我真的真的真的好喜欢你</title>
<meta name="viewport" content="width=device-width">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">
<link rel='stylesheet' id='contact-form-7-css' href='css/styles.css' type='text/css' media='all' />
<link rel='stylesheet' id='dslc-main-css-css' href='css/main.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='dslc-modules-css-css' href='css/modules.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='dslc-plugins-css-css' href='css/plugins.css' type='text/css' media='all' />
<link rel='stylesheet' id='ilove-style-css' href='css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='great-vibes-css' href='css/ad3a1c6f3ff94fb2ba14666104b24a07.css' type='text/css' media='screen' />
<link rel='stylesheet' id='font-lato-css' href='css/a86f112c7643460b98ed1c2564930cb3.css' type='text/css' media='screen' />
<link rel='stylesheet' id='bootstrap.min-css' href='css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome.min-css' href='css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='font-ilove-css' href='css/font-ilove.css' type='text/css' media='all' />
<link rel='stylesheet' id='sample-style-css' href='css/sample-style.css' type='text/css' media='all' />
<link rel='stylesheet' id='jquery.fancybox-css' href='css/jquery.fancybox.css' type='text/css' media='all' />
<link rel='stylesheet' id='base-css' href='css/base.css' type='text/css' media='all' />
<link rel='stylesheet' id='skin-css' href='css/skin.css' type='text/css' media='all' />
<link rel='stylesheet' id='animate-css' href='css/animate.css' type='text/css' media='all' />
<link rel='stylesheet' id='magnific-popup-css' href='css/magnific-popup.css' type='text/css' media='all' />
<link rel='stylesheet' id='owl.carousel-css' href='css/owl.carousel.css' type='text/css' media='all' />
<link rel='stylesheet' id='owl.theme-css' href='css/owl.theme.css' type='text/css' media='all' />
<link rel='stylesheet' id='style-css' href='css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='custom-css' href='css/custom.css' type='text/css' media='all' />
<link rel='stylesheet' id='redux-google-fonts-css' href='css/a1aa99bf24f341da9dbe08e29344feac.css' type='text/css' media='all' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery-migrate.min.js'></script>
<script type='text/javascript' src='js/plugins.js'></script>
<script type='text/javascript' src='js/main.min.js'></script>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style type="text/css">@import url("css/ae3254f6d6aa4ea2a1d30908b6fdf681.css"); .dslc-modules-section-wrapper, .dslca-add-modules-section { width : 1170px; } .dslc-modules-section { background-image:disabled;background-repeat:repeat;background-position:left top;background-attachment:scroll;background-size:auto;border-width:0px;border-style:solid;margin-left:0%;margin-right:0%;margin-bottom:0px;padding-bottom:80px;padding-top:80px;padding-left:0%;padding-right:0%; }#dslc-content #dslc-module-1 .heading { margin-bottom : px; } #dslc-content #dslc-module-1 .heading h2 { } #dslc-content #dslc-module-1 .heading p { } #dslc-content #dslc-module-3 .heading { margin-bottom : px; } #dslc-content #dslc-module-3 .heading h2 { } #dslc-content #dslc-module-3 .heading p { } #dslc-content #dslc-module-4 .ilove_timeline { margin-bottom : 0px; } #dslc-content #dslc-module-6 .misc-separator { margin-bottom : px; } #dslc-content #dslc-module-8 .heading { margin-bottom : px; } #dslc-content #dslc-module-8 .heading h2 { } #dslc-content #dslc-module-8 .heading p { } #dslc-content #dslc-module-11 .dslc-image { text-align : center ; background-color : transparent ; border-width : 0px; border-style : solid solid solid solid ; margin-bottom : 0px; padding-top : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } #dslc-content #dslc-module-11 .dslc-image,#dslc-content #dslc-module-11 .dslc-image img { border-radius : 0px; } #dslc-content #dslc-module-11 .dslc-image img { width : auto ; } #dslc-content #dslc-module-11 .dslc-image-caption { text-align : center ; font-size : 13px; font-weight : 400; font-family : Open Sans ; line-height : 22px; margin-top : 20px; } { margin-bottom : 0px; padding-top : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; font-size : 13px; line-height : 22px; margin-top : 20px; } #dslc-content #dslc-module-12 .heading { margin-bottom : px; } #dslc-content #dslc-module-12 .heading h2 { } #dslc-content #dslc-module-12 .heading p { } #dslc-content #dslc-module-33 .spacer { height : 75px; } #dslc-content #dslc-module-15 .heading { margin-bottom : px; } #dslc-content #dslc-module-15 .heading h2 { } #dslc-content #dslc-module-15 .heading p { } #dslc-content #dslc-module-20 .heading { margin-bottom : px; } #dslc-content #dslc-module-20 .heading h2 { } #dslc-content #dslc-module-20 .heading p { } #dslc-content #dslc-module-21 .event { background-color : #ef6a8a ; } #dslc-content #dslc-module-22 .event { background-color : #ef6a8a ; } #dslc-content #dslc-module-23 .event { background-color : #ef6a8a ; } #dslc-content #dslc-module-27 .spacer { height : 40px; } #dslc-content #dslc-module-24 .event { background-color : #ef6a8a ; } #dslc-content #dslc-module-25 .event { background-color : #ef6a8a ; } #dslc-content #dslc-module-26 .event { background-color : #ef6a8a ; } #dslc-content #dslc-module-28 .misc-separator { margin-bottom : px; } #dslc-content #dslc-module-29 .heading { margin-bottom : px; } #dslc-content #dslc-module-29 .heading h2 { } #dslc-content #dslc-module-29 .heading p { } #dslc-content #dslc-module-37 .heading { margin-bottom : 0px; } #dslc-content #dslc-module-37 .heading h2 { color : rgb(255, 255, 255) ; } #dslc-content #dslc-module-37 .heading p { } #dslc-content #dslc-module-55 .spacer { height : 40px; } #dslc-content #dslc-module-41 .heading { margin-bottom : px; } #dslc-content #dslc-module-41 .heading h2 { } #dslc-content #dslc-module-41 .heading p { } #dslc-content #dslc-module-17 .heading { margin-bottom : px; } #dslc-content #dslc-module-17 .heading h2 { } #dslc-content #dslc-module-17 .heading p { } #dslc-content #dslc-module-56 .spacer { height : 40px; } #dslc-content #dslc-module-54 .twitter_feeds { margin-bottom : 0px; } </style>
<style type="text/css" title="dynamic-css" class="options-output">.wrap-bg{background-color:#ffffff;}body{font-family:Lato;font-weight:normal;font-style:normal;}nav{font-family:Lato;font-weight:normal;font-style:normal;}h1{font-family:Lato;line-height:36px;font-weight:normal;font-style:normal;font-size:36px;}h2{font-family:Lato;line-height:30px;font-weight:normal;font-style:normal;font-size:30px;}h3{font-family:Lato;line-height:26px;font-weight:normal;font-style:normal;font-size:26px;}h4{font-family:Lato;line-height:22px;font-weight:normal;font-style:normal;font-size:22px;}h5{font-family:Lato;line-height:18px;font-weight:normal;font-style:normal;font-size:18px;}h6{font-family:Lato;line-height:16px;font-weight:normal;font-style:normal;font-size:16px;}
.heading h2 {
font-size: 38px;
}
</style>
</head>
<body class="home page page-id-7 page-template page-template-page-templates page-template-one-page page-template-page-templatesone-page-php dslc-page dslc-page-has-content" id="page-top" data-spy="scroll" data-target=".navbar-custom">
<!-- Preloader -->
<div id="preloader">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
/*------------------------------ Preloader ----------------------*/
$(window).load(function() {
$('.spinner').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
});
});
/* ]]> */
</script>
<!--Carousel-->
<div id="myCarousel" class="carousel slide carousel-fade">
<div class="messages">
<h1 class="slideInDown wow animated" data-wow-delay="0.5s">许辰<span class="heart pulsing fa fa-heart"></span>林1</h1>
<script type="text/javascript">
/* <![CDATA[ */
setInterval(function() {
var timespan = countdown(new Date("06/12/2016"), new Date());
var div = document.getElementById('time');
div.innerHTML = "<div><span>Years</span>" + timespan.years + "</div>" + "<div><span>Months</span>" + timespan.months + "</div>" + "<div><span>Days</span>" + timespan.days + "</div>" + "<div><span>Hours</span>" + timespan.hours + "</div>" + "<div><span>Minutes</span>" + timespan.minutes + "</div>" + "<div><span>Seconds</span>" + timespan.seconds + "</div>"
}, 1000);
/* ]]> */
</script>
<div id="time"></div>
<h4 class="fadeIn wow animated" data-wow-delay="1.2s">在爱情和计数</h4>
<div class="btn-special slideInUp wow animated page-scroll" data-wow-delay="0.7s">
<a href="#about"><span>发现更多</span></a>
</div>
</div>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="images/carousel-1.jpg" alt=""></div>
<div class="item"><img src="images/carousel-2.jpg" alt=""></div>
<div class="item"><img src="images/carousel-3.jpg" alt=""></div>
</div>
</div>
<!--Navbar-->
<div class="topbar-nav">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="ilove Wordpress Theme"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('.nav').onePageNav({
currentClass: 'active',
changeHash: false,
easing: 'easeInOutExpo',
scrollSpeed: 1500,
});
});
/* ]]> */
</script>
<!-- BEGIN Main Menu -->
<ul class="nav navbar-nav">
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9 page-scroll">
<a title="Adam & Eve" href="#about">我们的爱情</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10 page-scroll">
<a title="Our Family" href="#wmaq" >我们的幸福时刻</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11 page-scroll">
<a title="Big Moments" href="#bbsp">送你的表白视频</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14 page-scroll">
<a title="Contact" href="#contactus">祝福留言</a></li>
</ul> </div>
<!-- /.navbar-collapse -->
</div>
</nav>
</div>
<div class="wrap-bg"> <div class="container_full">
<div id="dslc-content" class="dslc-content dslc-clearfix">
<div id="dslc-main">
<div id="about" class="dslc-modules-section " style="border-right-style: hidden; border-left-style: hidden; padding-bottom:0px;padding-top:0px;">
<div class="dslc-modules-section-wrapper dslc-clearfix">
<div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-1" class="dslc-module-front dslc-module-Pluton_Title dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="1" data-dslc-module-id="Pluton_Title" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="" >
<div class="heading" id="#wmaq" title="wmaq">
<h2 class="wow fadeInUp underline padtop50" data-wow-delay="0.5s">我们的爱情</h2>
<p class="wow fadeInUp" data-wow-delay="0.7s">我们才刚开始，这东西是为你准备的,话是我偷的,但是我喜欢你是真的</p>
</div>
</div><!-- .dslc-module -->
<div id="dslc-module-2" class="dslc-module-front dslc-module-Pluton_Couple_Block dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="2" data-dslc-module-id="Pluton_Couple_Block" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="default" data-dslc-preset="" >
<div class="col-md-12">
<div class="col-md-6">
<ul class="ch-grid man wow flipInX" data-wow-delay="0.5s">
<li>
<img src="images/man.jpg" alt="">
<div class="ch-item ch-img-1">
</div>
</li>
</ul>
</div>
<div class="and">&</div>
<div class="col-md-6">
<ul class="ch-grid woman wow flipInX" data-wow-delay="0.5s">
<li>
<img src="images/woman.jpg" alt="">
<div class="ch-item ch-img-1">
</div>
</li>
</ul>
</div>
</div>
</div><!-- .dslc-module -->
</div> </div></div>
<div id="ilove-our-love" class="dslc-modules-section " style="border-right-style: hidden; border-left-style: hidden; padding-bottom:0px;padding-top:0px;">
<div id="wmaq" class="dslc-modules-section-wrapper dslc-clearfix"> <div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-3" class="dslc-module-front dslc-module-Pluton_Title dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="3" data-dslc-module-id="Pluton_Title" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="" >
<div class="heading">
<h2 class="wow fadeInUp underline padtop50" data-wow-delay="0.5s">我们的幸福时刻</h2>
<p class="wow fadeInUp" data-wow-delay="0.7s"><strong>爱情时刻</strong>是特殊的，它值得被记录下来，将永远铭记！这是我们一些重要和幸福的时刻。</p>
</div>
</div><!-- .dslc-module -->
<div id="dslc-module-4" class="dslc-module-front dslc-module-Pluton_Time_Line dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="4" data-dslc-module-id="Pluton_Time_Line" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="" >
<div class="ilove_timeline">
<div class="col-md-12">
<ul class="timeline">
<li class="">
<div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s"><i class="fa fa-heart"></i></div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s">
<div class="timeline-heading">
<h4 class="timeline-title">我们的初次相遇</h4>
<p><small class="text-muted"><i class="fa fa-heart"></i> 12/06/2016 -许辰</small></p>
</div>
<div class="timeline-body">
<div id="dslc-theme-content"><div id="dslc-theme-content-inner"><p>我们的相识是意外的，但这是一个美丽幸福的意外，让我遇到了这么好的你。</p>
</div></div> </div>
</div>
</li>
<li class="timeline-inverted negative100">
<div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s"><i class="fa fa-heart"></i></div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s">
<div class="timeline-heading">
<h4 class="timeline-title">在一起啦</h4>
<p><small class="text-muted"><i class="fa fa-heart"></i> 12/06/2016 -许辰</small></p>
</div>
<div class="timeline-body">
<div id="dslc-theme-content"><div id="dslc-theme-content-inner"><p>莎士比亚说过：爱情是一种甜蜜的痛苦，但是我愿意忍受这种痛苦 ，莎士比亚还说过，世界上没有比服侍爱情更快乐的了，你愿不愿意享受这种快乐？当然你是愿意的~嘿嘿</p>
</div></div> </div>
</div>
</li>
</li>
<li class="negative75">
<div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s"><i class="fa fa-heart"></i></div>
<div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s">
<div class="timeline-heading">
<h4 class="timeline-title">不离不弃</h4>
<p><small class="text-muted"><i class="fa fa-heart"></i> 6/15/2016 -许辰</small></p>
</div>
<div class="timeline-body">
<div id="dslc-theme-content"><div id="dslc-theme-content-inner"><p>爱的，我明白你对我付出了最大的耐心、包容心、关心......
你的心情总会因为我而变化，我很抱歉在未来的日子你还会受这份苦，
亲爱的，我们还太年轻未来还有很长的路要走。
</p>
</div></div> </div>
</div>
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div><!-- .dslc-module -->
<div id="dslc-module-6" class="dslc-module-front dslc-module-Pluton_Separator dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="6" data-dslc-module-id="Pluton_Separator" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="default" data-dslc-preset="" >
<div class="misc-separator">
<div class="separator"></div>
</div>
</div><!-- .dslc-module -->
</div> </div></div>
</div> </div></div>
<div id="ilove-funfact" class="dslc-modules-section " style="border-right-style: hidden; border-left-style: hidden; padding-bottom:0px;padding-top:0px;">
<div id="bbsp" class="dslc-modules-section-wrapper dslc-clearfix"> <div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-12" class="dslc-module-front dslc-module-Pluton_Title dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="12" data-dslc-module-id="Pluton_Title" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="" >
<div class="heading">
<h2 class="wow fadeInUp underline padtop50" data-wow-delay="0.5s">送你的表白视频</h2>
<p class="wow fadeInUp" data-wow-delay="0.7s">所有美好的记忆，我都会保存下来，等我们老了，再一起回忆。</p>
</div>
</div><!-- .dslc-module -->
<div id="dslc-module-13" class="dslc-module-front dslc-module-Pluton_Fun_Facts dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="13" data-dslc-module-id="Pluton_Fun_Facts" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="" >
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#startcounting .counting').appear(function() {
var count_element = $('.counts', this).html();
$(".counts", this).countTo({
from: 0,
to: count_element,
speed: 5000,
refreshInterval: 50,
});
});
});
/* ]]> */
</script>
</div><!-- .dslc-module -->
<div id="dslc-module-33" class="dslc-module-front dslc-module-Pluton_Spacer dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="33" data-dslc-module-id="Pluton_Spacer" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="default" data-dslc-preset="" >
<div class="spacer"> </div>
</div><!-- .dslc-module -->
</div> </div></div>
<div id="ilove-parallax-video" class="dslc-modules-section dslc-full " style="border-right-style: hidden; border-left-style: hidden; padding-bottom:0px;padding-top:0px;">
<div class="dslc-modules-section-wrapper dslc-clearfix"> <div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-14" class="dslc-module-front dslc-module-Pluton_Video_Parallax dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="14" data-dslc-module-id="Pluton_Video_Parallax" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="default" data-dslc-preset="" >
<div class="video-parallax">
<div class="overlay"></div>
<div class="col-md-12 playvid">
<a class="fa fa-play-circle popup-vimeo wow zoomInDown" data-wow-duration="1s" data-wow-delay="0.9s" href="视频地址"></a>
</div>
</div>
</div><!-- .dslc-module -->
</div> </div></div>
<div id="moments" class="dslc-modules-section dslc-full " style="border-right-style: hidden; border-left-style: hidden; padding-bottom:0px;padding-top:0px;">
<div class="dslc-modules-section-wrapper dslc-clearfix"> <div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-15" class="dslc-module-front dslc-module-Pluton_Title dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="15" data-dslc-module-id="Pluton_Title" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="" >
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
$("#owl-moments13").owlCarousel({
items : 4,
pagination : false,
autoPlay : true,
lazyLoad : true
});
});
/* ]]> */
</script>
</div>
<div class="clearfix"></div>
</div><!-- .dslc-module -->
</div> </div></div>
<div>
<div class="dslc-bg-video dslc-force-show"><div class="dslc-bg-video-inner"></div><div class="dslc-bg-video-overlay" style="background-color:rgb(40, 58, 68); opacity:0.9; "></div></div>
<div class="dslc-modules-section-wrapper dslc-clearfix"> <div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div>
</div><!-- .dslc-module -->
<div id="contactus" class="dslc-modules-section " style="border-right-style: hidden; border-left-style: hidden; padding-bottom:0px;padding-top:0px;">
<div class="dslc-modules-section-wrapper dslc-clearfix"> <div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-17" class="dslc-module-front dslc-module-Pluton_Title dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="17" data-dslc-module-id="Pluton_Title" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="" >
<div class="heading">
<h2 class="wow fadeInUp underline padtop50" data-wow-delay="0.5s">祝福留言</h2>
<p class="wow fadeInUp" data-wow-delay="0.7s">来吧，带上你们的祝福。我会仔细阅读你们的留言</p>
</div>
</div>
</div>
<div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<script type="text/javascript">
var duoshuoQuery = {short_name: "51bbw"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = 'http://static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<div id="dslc-module-56" class="dslc-module-front dslc-module-Pluton_Spacer dslc-in-viewport-check dslc-in-viewport-anim-none dslc-module-handle-like-regular" data-module-id="56" data-dslc-module-id="Pluton_Spacer" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="default" data-dslc-preset="" >
<div class="spacer"> </div>
</div><!-- .dslc-module -->
</div>
</div></div>
</div></div> </div>
</div>
<!-- Footer -->
<footer class="footer">
<!--Footer Two-->
<div class="container-fluid dark footer2">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>© ZBSEC & 2016 - All Rights Reserved. </p>
<p><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=0 height=0 src="http://fs.open.kugou.com/29dec13424ddcb9bd0a177057bd41600/5c1c81b5/G104/M07/0A/19/CIcBAFvc3mKANuu0ADro_WRXIr4225.mp3"></iframe></p>
</div> </div>
</div>
</div>
</div>
</footer>
<!-- End / Footer -->
<!-- BEGIN GO TO TOP --><a href="#." class="back-to-top" id="back-to-top"><i class="fa fa-heart"></i></a><!-- END GO TO TOP -->
<script type="text/javascript">
jQuery(document).ready(function($) {
/*------------------------------ WOW Script ----------------------*/
new WOW().init();
});
</script>
<script type='text/javascript' src='js/jquery.form.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/plutonthemes.com\/themes\/ilove\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","recaptchaEmpty":"Please verify that you are not a robot.","sending":"Sending ..."};
/* ]]> */
</script>
<script type='text/javascript' src='js/scripts.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var mejsL10n = {"language":"en-US","strings":{"Close":"Close","Fullscreen":"Fullscreen","Download File":"Download File","Download Video":"Download Video","Play\/Pause":"Play\/Pause","Mute Toggle":"Mute Toggle","None":"None","Turn off Fullscreen":"Turn off Fullscreen","Go Fullscreen":"Go Fullscreen","Unmute":"Unmute","Mute":"Mute","Captions\/Subtitles":"Captions\/Subtitles"}};
var _wpmejsSettings = {"pluginPath":"\/themes\/ilove\/wp-includes\/js\/mediaelement\/"};
/* ]]> */
</script>
<script type='text/javascript' src='js/mediaelement-and-player.min.js'></script>
<script type='text/javascript' src='js/wp-mediaelement.js'></script>
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<script type='text/javascript' src='js/modernizr.custom.js'></script>
<script type='text/javascript' src='js/jquery-ui.min.js'></script>
<script type='text/javascript' src='js/jquery.easing.min.js'></script>
<script type='text/javascript' src='js/jquery.sticky.js'></script>
<script type='text/javascript' src='js/jquery.parallax.js'></script>
<script type='text/javascript' src='js/masonry.pkgd.min.js'></script>
<script type='text/javascript' src='js/jquery.fitvids.js'></script>
<script type='text/javascript' src='js/wow.min.js'></script>
<script type='text/javascript' src='js/waypoints.min.js'></script>
<script type='text/javascript' src='js/smoothscrolling.js'></script>
<script type='text/javascript' src='js/jquery.appear.min.js'></script>
<script type='text/javascript' src='js/jquery.countto.js'></script>
<script type='text/javascript' src='js/jquery.mixitup.min.js'></script>
<script type='text/javascript' src='js/imagesloaded.pkgd.min.js'></script>
<script type='text/javascript' src='js/owl.carousel.min.js'></script>
<script type='text/javascript' src='js/jquery.magnific-popup.min.js'></script>
<script type='text/javascript' src='js/slide-fade-content.js'></script>
<script type='text/javascript' src='js/countup.js'></script>
<script type='text/javascript' src='js/modernizr.hover.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var PlutonAnimation = {"animation":"fadeUp"};
var PlutonTime = {"slidetime":"7"};
var PlutonLinkTheme = {"link":"http:\/\/plutonthemes.com\/themes\/ilove\/wp-content\/themes\/ilove\/assets\/"};
var PlutonWidth = {"menulogin":"50"};
/* ]]> */
</script>
<script type='text/javascript' src='js/custom.js'></script>
<script type='text/javascript' src='js/style-switcher.js'></script>
<script type='text/javascript' src='js/comment-reply.min.js'></script>
<script type='text/javascript' src='js/wp-embed.min.js'></script>
<script type='text/javascript' src='js/jquery.nav.js'></script>
</body>
</html>
三、精彩专栏
看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
上一篇： 情人节程序员用HTM
下一篇： HTML5网页设计作