HTML5生日祝福網頁制作 ?粉色少女系列為你定制? HTML+CSS+JavaScript
這是程式員表白系列中的100款網站表白之一，旨在讓任何人都能使用并創建自己的表白網站給心愛的人看， 此波共有100個表白網站，可以任意修改和使用，原始碼已上傳，演示網址如下，
🧡文章末尾-已經附上原始碼下載地址
🧡作者主頁-更多原始碼
🧡七夕情人節專欄文章
作品介紹
1.網頁作品簡介 ：基于 HTML+CSS+JavaScript 制作七夕情人節表白網頁, 生日祝福, 七夕告白, 求婚, 浪漫愛情3D相冊,炫酷代碼 ,已經兼容手機端和電腦端, 快來制作一款高端的表白網頁送(他/她)生日祝福網頁,制作修改簡單, 需替換圖片和文字即可.可自行更換背景音樂，
2.網頁作品編輯：任意HTML編輯軟體（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改網頁，
文章目錄
- HTML5生日祝福網頁制作 ?粉色少女系列為你定制? HTML+CSS+JavaScript
- 作品介紹
- 一、作品展示(已兼容手機端/電腦端)
- 二、檔案目錄
- 三、代碼實作
- 四、學習資料
- 五、原始碼下載
- 六、更多原始碼
一、作品展示(已兼容手機端/電腦端)
二、檔案目錄
三、代碼實作
<!--
* @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</div>
<div class="ly-txt26">
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXX</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="timepoint21"></div>
<div class="ly-box21">
<div class="ly-txt21">201X-0X-1X</div>
<div class="ly-txt22">
<p>XXXXXXXXXX</p>
<p>XXXXXXXXXX</p>
<p>XXXXXXXXXX</p>
<p>XXXXXXXXXX</p>
<p>XXXXXXXXXX</p>
</div>
<div class="ly-imgbox21">
<img class="ly-img21" src="img/1.png" />
</div>
</div>
<div class="ly-triangle21"></div>
<p>XXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox91">
<img class="ly-img91" src="img/1.jpg" />
</div>
</div>
<div class="ly-triangle22 xx92"></div>
<div class="ly-box92">
<div class="ly-txt25">201X-0X-2X</div>
<div class="ly-txt92">
<p>XXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox92">
<img class="ly-img92" src="img/1.jpg" />
</div>
</div>
<div class="ly-triangle91"></div>
<div class="ly-box93">
<div class="ly-txt25">201X-0X-2X</div>
<div class="ly-txt93">
<p>XXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox93">
<img class="ly-img93" src="img/1.jpg" />
</div>
</div>
<div class="ly-triangle92"></div>
</div>
<!--第十屏-->
<div class="section">
<div class="timeline"></div>
<div class="timepoint11"></div>
<div class="ly-box81">
<div class="ly-txt11">201X-0X-0X</div>
<div class="ly-txt82" style="top: 8%">
<p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
<p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
<p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox81">
<img class="ly-img81" src="img/1.jpg" />
</div>
</div>
<div class="ly-triangle11"></div>
<div class="ly-box82">
<div class="ly-txt13">201X-0X-1X</div>
<div class="ly-txt84">
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
</div>
<div class="ly-triangle82"></div>
</div>
</div>
<!--動態方塊-->
<ul class="bg-bubbles">
<li>
<img src="./img/timg.gif" style="width: 100%; height: 100%" />
</li>
<li>
<img src="./img/timg.gif" style="width: 100%; height: 100%" />
</li>
<li>
<img src="./img/timg.gif" style="width: 100%; height: 100%" />
</li>
<li>
<img src="./img/timg.gif" style="width: 100%; height: 100%" />
</li>
<li>
<img src="./img/timg.gif" style="width: 100%; height: 100%" />
</li>
<li>
<img src="./img/timg.gif" style="width: 100%; height: 100%" />
</li>
<li>
<img src="./img/timg.gif" style="width: 100%; height: 100%" />
</li>
<li>
<img src="./img/timg.gif" style="width: 100%; height: 100%" />
</li>
<li>
<img src="./img/timg.gif" style="width: 100%; height: 100%" />
</li>
<li>
<img src="./img/timg.gif" style="width: 100%; height: 100%" />
</li>
</ul>
</div>
<!-- <audio muted src="music/1.mp3" autoplay="autoplay" loop="loop"></audio> -->
<audio src="music/3.mp3" autoplay="autoplay" loop="loop"></audio>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<!-- <script src="js/auto-play.js"></script> -->
<script src="js/memories.js"></script>
</body>
</html>
四、學習資料
web前端 零基礎-入門到高級 (視頻+原始碼+開發軟體+學習資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站
五、原始碼下載
【百度網盤-完整原始碼下載地址↓】
鏈接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取碼：8888
六、更多原始碼
?100款表白網頁演示地址
?100款表白網頁在線視頻演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/342233.html
標籤：其他
上一篇：《JavaScript逆襲指北》第二章 2.1 字符集 格式介紹
下一篇：前端學習筆記-07一些總結(一)