情人节程序员用HTML网页表白【告白模板】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

【作者主页——🔥获取更多优质源码】

【学习资料/简历模板/面试资料/ 网站设计与制作】

【web前端期末大作业——🔥🔥毕设项目精品实战案例】


一、网页介绍

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 &amp; 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">&amp;</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,
		            });
		        });
			});
		/* ]]&gt; */
		</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
                    });
                });
            /* ]]&gt; */
            </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 &amp; 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>



三、精彩专栏

看到这里了就 【点赞,好评,收藏】 三连 支持下吧,你的支持是我创作的动力

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥