HTML5生日祝福网页制作 (粉色系列为你定制) HTML+CSS+JavaScript
Posted @代码搬运工-web领域
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5生日祝福网页制作 (粉色系列为你定制) HTML+CSS+JavaScript相关的知识，希望对你有一定的参考价值。
html5生日祝福网页制作 ❤粉色少女系列为你定制❤ HTML+CSS+javascript
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。
🧡文章末尾-已经附上源码下载地址
作品介绍
1.网页作品简介 ：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码 ,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。
2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改网页。
文章目录
一、作品展示(已兼容手机端/电脑端)
二、文件目录
三、代码实现
<!--
* @Author: your name
* @Date: 2021-03-25 09:07:37
* @LastEditTime: 2021-03-25 10:21:49
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \\tiny-heart-master\\birthday-mobile\\Memories.html
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no"
/>
<title>Happy Birthday</title>
<link rel="stylesheet" href="css/jquery.fullPage.css" />
<link rel="stylesheet" href="css/memories.css" />
</head>
<body>
<!-- 背景音乐 -->
<div style="display: none">
<!-- 网易云外链 -->
<iframe
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width="330"
height="86"
src="https://music.163.com/outchain/player?type=2&id=480353&auto=1&height=66"
></iframe>
</div>
<div class="bgcolor">
<div style="z-index: 100" id="dowebok">
<!--第一屏-->
<div class="section">
<div class="ly-box01">
<div class="ly-txt01">
<p class="ly-stxt01">
宝贝，你的生日就在今天，祝你可爱依旧，快乐多多！
</p>
<p class="ly-stxt02">XXXXXXXXXXXXXXXXXXXXXXX</p>
<p class="ly-stxt03">XXXXXXXXXXXXXXXXXXXXXXX</p>
<p class="ly-stxt04">XXXXXXXXXXXXXXXXXXXXXXX</p>
<p class="ly-stxt05">XXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
<div class="ly-txt02">
<p class="ly-stxt06">XXXXXXXXXXXXXXXXXXXXXXX</p>
<p class="ly-stxt07">XXXXXXXXXXXXXXXXXXXXXXX</p>
<p class="ly-stxt08">XXXXXXXXXXXXXXXXXXXXXXX</p>
<p class="ly-stxt09">XXXXXXXXXXXXXXXXXXXXXXX</p>
<p class="ly-stxt10">XXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
</div>
</div>
<!--第二屏-->
<div class="section">
<div class="timeline"></div>
<div class="timepoint11"></div>
<div class="ly-box11">
<div class="ly-txt11">201X-1X-1X</div>
<div class="ly-txt12">XXXXXXXXXXXXXXXXXXXX</div>
<div class="ly-imgbox11">
<img class="ly-img11" src="img/1.jpg" />
</div>
</div>
<div class="ly-triangle11"></div>
<div class="ly-box12">
<div class="ly-txt13">201X-1X-1X</div>
<div class="ly-txt14">
<p>XX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
</div>
<div class="ly-triangle12"></div>
</div>
<!--第三屏-->
<div class="section">
<div class="timeline"></div>
<div class="timepoint21"></div>
<div class="ly-box21">
<div class="ly-txt21">201X-1X-2X</div>
<div class="ly-txt22">
<p>XXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox21">
<img class="ly-img21" src="img/1.png" />
</div>
</div>
<div class="ly-triangle21"></div>
<div class="ly-box22">
<div class="ly-txt23">201X-1X-1X</div>
<div class="ly-txt24">
<p>XXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox22">
<img class="ly-img22" src="img/1.png" />
</div>
</div>
<div class="ly-triangle22"></div>
<div class="ly-box23">
<div class="ly-txt25">201X-1X-2X</div>
<div class="ly-txt26">
<p>XXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox23">
<img class="ly-img23" src="img/1.jpg" />
</div>
</div>
<div class="ly-triangle23"></div>
</div>
<!--第四屏-->
<div class="section">
<div class="timeline"></div>
<div class="timepoint31"></div>
<div class="ly-box31">
<div class="ly-txt31">201X-1X-2X</div>
<div class="ly-txt32">
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox31">
<img class="ly-img31" src="img/1.jpg" />
</div>
</div>
<div class="ly-triangle31"></div>
<div class="ly-box32">
<div class="ly-txt33">201X-1X-2X</div>
<div class="ly-txt34">
<p>XXXXXXXXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox31">
<img class="ly-img31" src="img/1.png" />
</div>
</div>
<div class="ly-triangle32"></div>
</div>
<!--第五屏-->
<div class="section">
<div class="timeline"></div>
<div class="timepoint21"></div>
<div class="ly-box52">
<div class="ly-txt21">2015-01-01</div>
<div class="ly-txt22">
<p>XXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox21">
<img class="ly-img21" src="img/1.jpg" />
</div>
</div>
<div class="ly-triangle21"></div>
<div class="ly-box22">
<div class="ly-txt23">201X-0X-1X</div>
<div class="ly-txt51">
<p>XXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox22">
<img class="ly-img22" src="img/1.png" />
</div>
</div>
<div class="ly-triangle22"></div>
<div class="ly-box51">
<div class="ly-txt25">201X-0X-1X以上是关于HTML5生日祝福网页制作 (粉色系列为你定制) HTML+CSS+JavaScript的主要内容，如果未能解决你的问题，请参考以下文章