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

最新推荐文章于 2024-03-29 10:27:01 发布
最新推荐文章于 2024-03-29 10:27:01 发布
阅读量773 收藏 7
点赞数 20
文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65484028/article/details/134874526
版权

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

三、精彩专栏

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

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

二挡起步
关注
  • 20
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
表白网页7 情人节七夕节520程序员表白源码
05-11
情人节七夕节520程序员表白源码 效果博客对应表白网页7 地址：https://blog.csdn.net/m0_37916936/article/details/116608659
七夕来临，程序员该如何花式表白？html+css实现简单七夕表白
黄小黄的博客
08-03 3203
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？本文通过简单的 html实例，实现简单的告白，希望对大家有帮助！
HTML5七夕情人节表白网页制作【我喜欢你H5】HTML+CSS+JavaScript
最新发布
网页设计与制作
03-29 1081
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。 文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码三、精彩专栏 一、网页介绍 1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕
基于HTML+CSS+JS实现七夕情人节表白代码【含代码】
weixin__BJ050106的博客
08-13 1165
七夕情人节，这么浪漫的节日，自然少不了我这个浪漫博主，本次为大家贡献表白信封的制作，其他的就看缘分啦，哈哈，最后会放上资源包，需要的小伙伴自取就可以了。
让她/他心动的告白，页面制作（9个页面+链接+代码，原生HTML+CSS+JS实现）
weixin_44009656的博客
05-19 4万+
8个前端表白小案例，即取即用，祝您找到另一半，祝大家520心想事成。
浪漫的七夕表白简单代码（简单的小代码）
离歌的博客
08-22 3558
是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？无论那种形式，快来秀我们一脸吧！以程序员的方式撒狗粮，专业浪漫，值得拥有！ 浪漫的七夕表白简单代码（简单的小代码）
html爱心表白代码（最全）
热门推荐
皮小孩的博客
12-20 47万+
皮小孩的个人主页（8.1更新）需要本文前12个表白代码可以进链接扫码下载—>>>网页爱心表白代码大全扫码支付成功后会得到百度网盘链接和提取码，里面有本文的前12个表白代码，每个代码都有详细的使用说明，教你怎么修改文字、照片、背景音乐等。购买过程中有问题请及时联系qq1975728171.（比如：购买链接失效、购买后没有百度网盘链接、无法使用支付宝支付等等问题）对象生日快乐祝福代码—>>>html生日快乐代码和ta在一起100天纪念代码—>>>相爱xxx天纪念html代码。
html表白代码
酷酷的馫博客
11-26 2万+
html表白代码
HTML浪漫动态表白代码+音乐(附源码)（一）
Mr_WoLong
02-09 2万+
HTML浪漫动态表白代码+音乐(附源码)
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6261
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
撩妹/撩仔代码
Null - 滨
02-14 3151
撩妹/撩仔代码 @Null - 滨 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2klEQVQ4T62TUQ6CMAyG2/GCByA
情人节程序员用HTML网页表白【烟花代码】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
情人节程序员用HTML网页表白【爱心_文字音乐告白】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
情人节程序员用HTML网页表白【告白动画】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
情人节程序员用HTML网页表白【粒子告白】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
浪漫爱心表白网页模板
-_^汪洸*的博客
10-17 8991
<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>某某，我爱你 浪漫爱心表白网页模板一 </title> <meta name="keywords" content="表白网页在...
HTML5七夕情人节表白网页制作【html5全屏七夕表白页面滚动模板】HTML+CSS+JavaScript
HTML网页设计
07-21 2383
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏 看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。...
HTML5七夕情人节表白网页(爱情树 Html5实现唯美表白动画代码) HTML+CSS+JavaScript
HTML5学生网页设计作业成品模板
11-11 1万+
HTML5七夕情人节表白网页❤爱情树 Html5实现唯美表白动画代码❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。 ????文章末尾-已经附上源码下载地址 ????作者主页-更多源码 ????七夕情人节告白源码-专栏文章 作品介绍 1.网页作品简介 ：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七
情人节程序员用html网页表白
08-06
情人节，程序员通常会选择使用HTML网页来表白。HTML是一种用于创建网页的标记语言，它可以让程序员以简洁明了的方式展示自己的情感。 首先，程序员会创建一个HTML网页。通过编写HTML标记，他们可以定义网页的结构和样式。例如，他们可以添加标题、段落和图片等元素，以使网页更加生动和吸引人。 接下来，程序员会选择一个合适的主题来营造浪漫的氛围。他们可能会使用红色爱心图案、精美的背景图片和华丽的字体来突出表白的主题。 然后，程序员会通过添加文本来表达他们的感情。他们可能会写下一封深情的情书，表达自己对对方的爱意和珍视。此外，他们还可以使用HTML的特性来增加一些创意和趣味，例如创建一个动态的文本效果或添加音乐和视频。 最后，程序员会将这个HTML网页发布在互联网上，然后将链接发送给他们心仪的人。对方只需点击链接，就能在网页上看到精心制作的表白页面，并阅读程序员用心编写的话语。 总之，通过使用HTML网页表白，程序员可以通过创意的设计和精心的文字表达自己的爱意。这种方式既能展示他们的技术才能，又能传达出浪漫和温馨的情感。这样的表白方式也更能给对方留下深刻的印象，使他们感受到程序员的真心和用心。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值