當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

HTML5生日祝福网页制作 (粉色系列为你定制) HTML+CSS+JavaScript

發布時間：2023/12/10 javascript 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5生日祝福网页制作 (粉色系列为你定制) HTML+CSS+JavaScript 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML5生日祝福網頁制作 ?粉色少女系列為你定制? HTML+CSS+JavaScript

這是程序員表白系列中的100款網站表白之一，旨在讓任何人都能使用并創建自己的表白網站給心愛的人看。此波共有100個表白網站，可以任意修改和使用，源碼已上傳，演示網址如下。

🧡文章末尾-已經附上源碼下載地址

🧡作者主頁-更多源碼

🧡七夕情人節專欄文章

作品介紹

1.網頁作品簡介 ：基于 HTML+CSS+JavaScript 制作七夕情人節表白網頁, 生日祝福, 七夕告白, 求婚, 浪漫愛情3D相冊,炫酷代碼 ,已經兼容手機端和電腦端, 快來制作一款高端的表白網頁送(他/她)生日祝福網頁,制作修改簡單, 需替換圖片和文字即可.可自行更換背景音樂。

2.網頁作品編輯：任意HTML編輯軟件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改網頁。

文章目錄

HTML5生日祝福網頁制作 ?粉色少女系列為你定制? HTML+CSS+JavaScript
作品介紹
一、作品展示(已兼容手機端/電腦端)
二、文件目錄
三、代碼實現
四、學習資料
五、源碼下載
六、更多源碼

一、作品展示(已兼容手機端/電腦端)

二、文件目錄

三、代碼實現

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><metaname="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"><iframeframeborder="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 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/memories.js"></script></body> </html>

四、學習資料

web前端零基礎-入門到高級 (視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站

五、源碼下載

【百度網盤-完整源碼下載地址↓】

鏈接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取碼：8888

六、更多源碼

?100款表白網頁演示地址

?100款表白網頁在線視頻演示

總結

以上是生活随笔為你收集整理的HTML5生日祝福网页制作 (粉色系列为你定制) HTML+CSS+JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CSS之深入理解 flex 布局以及计算
下一篇： html幻灯片图片切换效果代码,java