情人节程序员用HTML网页表白【春娇-志明结婚邀请函】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 1.HTML代码
- css代码
- 三、精彩专栏
一、网页介绍
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码
,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑:任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
一、网页效果
二、代码展示
1.HTML代码
代码如下(示例):以下仅展示部分代码供参考~
<!DOCTYPE html>
<html class=" js-no-overflow-scrolling">
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>h5电子邀请函</title>
<link rel="stylesheet" type="text/css" href="page-animation.css">
<link rel="stylesheet" type="text/css" href="H5FullscreenPage.css"></head>
<script>alert("温馨提示:手机访问方可滚动查看下一页!")
</script>
<body class="H5FullscreenPage"><div class="niben_banc"><a href="#" onclick=" Tanchuc()">基本信息</a><a href="#">保存</a></div><!-- --><!--弹框 --><div class="tanchu_xx_web1 Tan_c"><div class="tcc_beij_x_web" onclick=" off()"></div> <div class="kuang_li"><div class="off" onclick=" off()"></div><img class="img_bj" src="img/img_web3_03.png" alt=""> <div class="bt"><h2>请输入您和您爱侣的名字</h2><p>还有你们喜结连理的时间哦</p></div><div class="bdkuan"> <input type="text" placeholder="新郎"> <input type="text" placeholder="新娘"><input type="text" placeholder="新郎电话"><input type="text" placeholder="新娘电话"><input type="text" placeholder="结婚日期(如:2020年5月20日(星期六)12:00)"> <input type="text" placeholder="地址"> <button>确定</button></div> </div><script>function Tanchuc(){$(".Tan_c").show();} function off(){$(".Tan_c").hide(); } </script></div> <!-- --> <div class="H5FullscreenPage-wrap"><!-- --> <div class="item item1"><!-- 金色 --><div class="part rollInLeft shang_img"> <img src="img/2.png" alt=""> </div><div class="part rollInRight shang_img shang_img_b"><img src="img/21.png" alt=""></div><!-- 线条 --><div class="part top_Xial slideUp" data-delay="400"></div><div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div><!--hua 金花 --><div class="part fadeIn jinse_hua" data-delay="1000"> </div><div class="part fadeIn jinse_hua jinse_hua_x" data-delay="1000"></div> <!-- 叶子 --> <div class="part slideLeft yezi_zuo"></div><div class="part slideLeft yezi_zuo yezi_zuo_zq"></div><div class="part slideDown yezi_zuo_xx"></div><div class="part slideDown yezi_zuo_yrx"></div><div class="part zoomIn piao_gif" data-delay="1500"><img src="img/jingy.gif" alt=""></div><!-- 中间 --><div class="part fadeIn kuang_nieg" data-delay="800"><img src="img/19.png" alt=""></div><div class="part fadeIn kuang_nieg" data-delay="1000"><img class="nie" src="img/19.png" alt=""></div><!-- 中间叶子 --><div class="part fadeIn yezi_zhongk" data-delay="1300"></div><div class="part fadeIn yezi_zhongk_x" data-delay="1300"></div><!-- 字 --><div class="part zhongjiek_Ge" data-delay="1800"><img src="img/9.png" alt=""></div><div class="part zhongjiek_Ge" data-delay="1800"><img class="nio" src="img/1.png" alt=""></div><!-- 文字 --><div class="part xinniang_xinlang" data-delay="1800"><p>Mr.志明<b>&</b>春娇.Miss</p><dd>2020/05/20</dd><span>You two are the prince and princess in a fairy tale and may you live happily everafter!</span></div><!-- 修改 --><!-- <div class="xiugai_nige"></div> --><!-- --><!-- <div class="part part1 fadeIn" data-delay="1000"> </div><div class="part part2 fadeIn"></div> --></div><!-- --><div class="item item2"><!-- 金色 --><div class="part rollInLeft shang_img"> <img src="img/2.png" alt=""></div><div class="part rollInRight shang_img shang_img_b"><img src="img/21.png" alt=""></div><!-- 线条 --><div class="part top_Xial slideUp" data-delay="400"></div><div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div><!--hua 金花 --><div class="part fadeIn jinse_hua" data-delay="1000"> </div><div class="part fadeIn jinse_hua jinse_hua_x" data-delay="1000"></div> <!-- 叶子 --> <div class="part slideLeft yezi_zuo"></div><div class="part slideLeft yezi_zuo yezi_zuo_zq"></div><div class="part slideDown yezi_zuo_xx"></div><div class="part slideDown yezi_zuo_yrx"></div><div class="part zoomIn piao_gif" data-delay="1500" style=" width: 100%;height: 100%;top: 0;"><img src="img/jingy.gif" alt=""></div><!-- 中间 --><div class="part fadeIn kuang_nieg" data-delay="800"><img src="img/19.png" alt=""></div><div class="part fadeIn kuang_nieg" data-delay="1000"><img class="nie" src="img/19.png" alt=""></div><!-- 中间叶子 --><div class="part fadeIn yezi_zhongk" data-delay="1300"></div><div class="part fadeIn yezi_zhongk_x" data-delay="1300"></div><!-- 字 --><div class="part zhongjiek_Ge rentx_kuang" data-delay="1800"><div class="rentx"><img src="img/xinlang1.jpg" alt=""></div></div> <!-- 文字 --><div class="part xinniang_xinlang" data-delay="1800" ><p>新郎:志明</p><dd style=" line-height: .4rem; padding-top:.2rem;">要你拥有会长大的幸福<br>一天比一天像公主,梦都被满足</dd><!-- <span>You two are the prince and princess in a fairy tale and may you live happily everafter!</span> --></div><!-- --> <!-- 修改 --><div class="xiugai_nige" style=" left: .3rem;top: 5.8rem;"></div><!-- --></div><!-- --><div class="item item3"><!-- 金色 --><div class="part rollInLeft shang_img"> <img src="img/2.png" alt=""></div><div class="part rollInRight shang_img shang_img_b"><img src="img/21.png" alt=""></div><!-- 线条 --><div class="part top_Xial slideUp" data-delay="400"></div><div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div><!--hua 金花 --><div class="part fadeIn jinse_hua" data-delay="1000"> </div><div class="part fadeIn jinse_hua jinse_hua_x" data-delay="1000"></div> <!-- 叶子 --> <div class="part slideLeft yezi_zuo"></div><div class="part slideLeft yezi_zuo yezi_zuo_zq"></div><div class="part slideDown yezi_zuo_xx"></div><div class="part slideDown yezi_zuo_yrx"></div><div class="part zoomIn piao_gif" data-delay="1500" style=" width: 100%;height: 100%;top: 0;"><img src="img/jingy.gif" alt=""></div><!-- 中间 --><div class="part fadeIn kuang_nieg" data-delay="800"><img src="img/19.png" alt=""></div><div class="part fadeIn kuang_nieg" data-delay="1000"><img class="nie" src="img/19.png" alt=""></div><!-- 中间叶子 --><div class="part fadeIn yezi_zhongk" data-delay="1300"></div><div class="part fadeIn yezi_zhongk_x" data-delay="1300"></div><!-- 字 --><div class="part zhongjiek_Ge rentx_kuang" data-delay="1800"><div class="rentx"><img src="img/ninnaing.jpg" alt=""></div></div> <!-- 文字 --><div class="part xinniang_xinlang" data-delay="1800" ><p>新娘:春娇</p><dd style=" line-height: .4rem; padding-top:.2rem;">全世界都知道,我不在乎付出多少<br>我想这是幸福的写照</dd><!-- <span>You two are the prince and princess in a fairy tale and may you live happily everafter!</span> --></div><!-- --> <!-- 修改 --><div class="xiugai_nige" style=" left: .3rem;top: 5.8rem;"></div><!-- --></div><!-- --><div class="item item4"><div class="part rollInLeft shang_img"> <img src="img/2.png" alt=""> </div><div class="part rollInRight shang_img shang_img_b"><img src="img/21.png" alt=""></div><!-- 线条 --><div class="part top_Xial slideUp" data-delay="400"></div><div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div><!--hua 金花 --><div class="part fadeIn jinse_hua jinse_hua_no" data-delay="1000"> </div><div class="part fadeIn jinse_hua jinse_hua_x jinse_hua_no" data-delay="1000"></div> <!-- 叶子 --> <div class="part slideLeft yezi_zuo"></div><div class="part slideLeft yezi_zuo yezi_zuo_zq"></div><div class="part slideDown yezi_zuo_xx"></div><div class="part slideDown yezi_zuo_yrx"></div><!-- 中间叶子 --><div class="part fadeIn yezi_zhongk yezi_zhongk_dier" data-delay="1300"></div> <!-- h婚纱照 --> <div class="part nimen_img slideDown" data-delay="1800"><img src="img/nin_gs.jpg" alt=""></div><!-- 文字 --><div class="part xinniang_xinlang" data-delay="1800" ><!-- <p>新娘:春娇</p> --><dd style="line-height: .4rem; padding-top:.2rem;">深爱之人藏心不挂嘴<br>久念之人在梦不在眼</dd><!-- <span>You two are the prince and princess in a fairy tale and may you live happily everafter!</span> --></div><!-- 修改 --><div class="xiugai_nige"></div><!-- --> <!-- --></div><!-- --><div class="item item5"><div class="part rollInLeft shang_img"> <img src="img/2.png" alt=""> </div><div class="part rollInRight shang_img shang_img_b"><img src="img/21.png" alt=""></div><!-- 线条 --><div class="part top_Xial slideUp" data-delay="400"></div><div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div><!--hua 金花 --><div class="part fadeIn jinse_hua jinse_hua_no" data-delay="1000"> </div><div class="part fadeIn jinse_hua jinse_hua_x jinse_hua_no" data-delay="1000"></div> <!-- 叶子 --> <div class="part slideLeft yezi_zuo"></div><div class="part slideLeft yezi_zuo yezi_zuo_zq"></div><div class="part slideDown yezi_zuo_xx"></div><div class="part slideDown yezi_zuo_yrx"></div><!-- 中间叶子 --><div class="part fadeIn yezi_zhongk yezi_zhongk_dier" data-delay="1300"></div> <!-- 字 --><div class="part zhongjiek_Ge zhongjiek_Ge_er" data-delay="1800"><img src="img/9.png" alt=""></div><div class="part zhongjiek_Ge zhongjiek_Ge_er" data-delay="1800"><img class="nio" src="img/1.png" alt=""></div><!-- h婚纱照 --> <div class="part nimen_img nimen_img_text slideDown" data-delay="1800"><div class="hou_tupian"><p>在最好的年华</p><p>相见</p><p>在最美的时光里</p><p>相爱</p><p> 沉浸在幸福中的我们将于</p><p>2020年5月20日(星期六)12:00</p> <p>举办婚礼</p><p>诚邀您和您的家人出席</p><p>新郎:志明 & 新娘:春娇</p><p>席设</p><p>贵州省贵阳市南明区国际大酒店</p><p>期待您的到来</p><p class="an"><a href="tel:18275330710">联系新郎</a><a href="tel:18275330710">联系新娘</a></p></div></div><!-- 修改 --><!-- <div class="xiugai_nige"></div> --><!-- --> </div><!-- --> </div><script type="text/javascript" src="index_Zepto.js"></script> <script type="text/javascript" src="H5FullscreenPage.js"></script><script type="text/javascript">H5FullscreenPage.init({'type':2,'pageShow' : function(dom){ },'pageHide' : function(dom){//console.log(dom);}});</script>
</body>
</html>
css代码
<style type="text/css">html, body {margin: 0;width: 100%;height: 100%;font-family: arial;text-align: center;}* {margin:0;padding: 0;}ul {list-style: none;}body {max-width: 640px;margin: auto;}
</style>
三、精彩专栏
看到这里了就 【点赞,好评,收藏】
三连 支持下吧,你的支持是我创作的动力。——
。
情人节程序员用HTML网页表白【春娇-志明结婚邀请函】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript相关推荐
- 100款 ❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 【建议收藏】
120款❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100 ...
- python程序员专用壁纸_程序员炫技必备:用Python生成马赛克画!(文末附源码)...
原标题:程序员炫技必备:用Python生成马赛克画!(文末附源码) 源 | Python与数据分析文 | 强哥 大家知道马赛克画是什么吗?不是动作片里的马赛克哦~~ 马赛克画是一张由小图拼成的大图,本 ...
- HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)...
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画 海贼王 作者是尾田荣一郎 主页分为 漫画简 ...
- HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画 海贼王 作者是尾田荣一郎 主页分为 漫画简 ...
- HTML5期末大作业:电商购物网站设计——易购电商购物网页设计与实现(31页) 含论文+答辩+PPT 计算机毕设网页设计源码 HTML+CSS+JavaScript web课程设计网页规划与设计...
HTML5期末大作业:电商网站设计--易购电商购物网页设计与实现(31页) 含论文+PPT 学生DW网页设计作业成品 HTML+CSS+JavaScript web课程设计网页规划与设计 计算机毕设网 ...
- 情人节程序员用HTML网页表白【在一起计时】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 情人节程序员用HTML网页表白【嫦娥奔月(满屏泡泡)】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 情人节程序员用HTML网页表白【超具创意的网页生日快乐】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 情人节程序员用HTML网页表白【制作属于我们的爱情相册网页】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
最新文章
- 2011年给力新作——《数据库系统工程师考试案例梳理、真题透解与强化训练》...
- 【正一专栏】马蓉到底对王宝强还有啥感情?
- python获取数组中大于某一阈值的那些索引值_使用Python+OpenCV进行实时车道检测...
- 【51Nod - 1279】 扔盘子(思维)(on-p会超时)
- android 过滤emoji表情符号,android怎样过滤字符串中的emoji表情
- 企业为什么要做SEO,它的重要性有哪些?
- Activity 半透明样式
- How Unreal Engine 4 Will Change The Next Games You Play
- Linux 系统恢复误删除 Linux文件
- icesat2 重要参数
- Excel闪退问题解决办法
- 将文件从ubuntu拷贝到linux开发板
- 学Java开发需要考什么证书?
- 简单说明什么是网络的DMZ区域
- python统计不同字符的个数
- View事件分发机制
- 荆楚计算机专业分数线理工,荆楚理工学院分数线
- iOS12 Xcode10正式版问题汇总以及新特性(持续更新中....)
- 5.2 创建个人中心页面-前端部分
- 什么是Hadoop的HA机制?
热门文章
- 软件项目计划编制方针 (转)
- dubbo实现esb_为什么你并不需要企业服务总线(ESB)
- 《基于物联网的车内安防系统项目需求说明书+系统概要说明+系统详细说明》
- 11 边缘保留滤波(EPF)
- 将matlab中工作去的数据保存为.mat文件
- Spark(五十三):Spark RPC初尝试使用
- 四位二进制、十进制、四位十六进制相互转换(高位补零)python
- 基于canoe 新建一个lin工程_canoe canalyzer 区别
- 小学计算机课知识点,小学信息技术课程课件
- ae导出gif插件_flash如何制作GIF图片?flash和AE将做好的动画导出为GIF