當(dāng)前位置:首頁(yè) > IT技術(shù) > Web編程 > 正文

制作粉色少女系列?生日快樂(lè)祝福網(wǎng)頁(yè)?(HTML+CSS+JS)
2021-10-11 14:57:15

制作生日快樂(lè)祝福網(wǎng)頁(yè)(HTML+CSS+JS)

程序員愛(ài)情?520/表白/七夕情人節(jié)/求婚?專(zhuān)用html5+css3+js 生日快樂(lè)網(wǎng)站模板
HTML生日快樂(lè)祝福網(wǎng)頁(yè)模板,該模板有多種動(dòng)態(tài)效果圖,全局采用藍(lán)色裝飾,適用于給女朋友的生日祝福,只需簡(jiǎn)單修改,即可用網(wǎng)頁(yè)生成打開(kāi)。

戳下方鏈接↓查看線上演示地址

??0.生日演示地址?? 賬號(hào)是 cyl 密碼是 1007

??1.生日快樂(lè)????(多頁(yè)面html模板)★在線演示地址?? 賬號(hào)是 123 密碼是 123

??2.生日蛋糕????★在線演示地址??

??3.(生日快樂(lè))蛋糕煙花+藍(lán)色夢(mèng)幻海洋3D相冊(cè)????★在線演示地址??

H5 手機(jī)端

一,登錄頁(yè)面 (可自定義文字+圖片+音樂(lè))

制作粉色少女系列?生日快樂(lè)祝福網(wǎng)頁(yè)?(HTML+CSS+JS)_html表白網(wǎng)頁(yè)

二,生日蛋糕頁(yè)面(可自定義文字+音樂(lè))

制作粉色少女系列?生日快樂(lè)祝福網(wǎng)頁(yè)?(HTML+CSS+JS)_生日快樂(lè)網(wǎng)頁(yè)制作html_02

三.浪漫表白頁(yè)面 (可自定義圖片+文字+音樂(lè))

制作粉色少女系列?生日快樂(lè)祝福網(wǎng)頁(yè)?(HTML+CSS+JS)_生日快樂(lè)網(wǎng)頁(yè)制作html_03

制作粉色少女系列?生日快樂(lè)祝福網(wǎng)頁(yè)?(HTML+CSS+JS)_表白網(wǎng)頁(yè)代碼HTML_04

PC 電腦端

登錄頁(yè)

制作粉色少女系列?生日快樂(lè)祝福網(wǎng)頁(yè)?(HTML+CSS+JS)_表白網(wǎng)頁(yè)代碼HTML_05

生日蛋糕頁(yè)面

制作粉色少女系列?生日快樂(lè)祝福網(wǎng)頁(yè)?(HTML+CSS+JS)_生日祝福代碼HTML_06

浪漫表白頁(yè)面

制作粉色少女系列?生日快樂(lè)祝福網(wǎng)頁(yè)?(HTML+CSS+JS)_生日祝福代碼HTML_07

修改密碼

在當(dāng)前目錄下,有js/index.js文件:

//修改此處的123,123即可修改登錄的用戶(hù)名和密碼
if(userName=="123" && pwd=="123"){
event.preventDefault();
$('form').fadeOut(500);
$('.wrapper').addClass('form-success');
setTimeout(function(){location.href="BirthdayCake.html";},2000);
}

替換memories頁(yè)面文字和圖片

以第三屏為例:

<!--第三屏-->

<div class="section">
<!-- 下面兩個(gè)div分別實(shí)現(xiàn)的左邊那條軸和那個(gè)小球 -->
<div class="timeline"></div>
<div class="timepoint21"></div>
<div class="ly-box21">
<div class="ly-txt21">
<!-- 這里更改日期 -->
201X-1X-2X
</div>
<div class="ly-txt22">
<!-- 這里更改內(nèi)容,段落、換行用<p></p>包裹起來(lái) -->
<p> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
<div class="ly-imgbox21">
<!-- 這里更改圖片,圖片請(qǐng)先改好對(duì)應(yīng)的名字并且放到img文件夾下面
如果你不懂css,那么最好就裁剪圖片至合適大小為止
如果你會(huì)css,那么可以根據(jù)class名字去修改對(duì)應(yīng)css的寬度設(shè)置-->
<img class="ly-img21" src="img/2014.11.26-1.png">
</div>
</div>
<div class="ly-triangle21"></div>

<div class="ly-box22">
<div class="ly-txt23">
<!-- 與上面類(lèi)似,不再多說(shuō) -->
201X-1X-1X
</div>
<div class="ly-txt24">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
<div class="ly-imgbox22">
<img class="ly-img22" src="img/2014.12.19-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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
<div class="ly-imgbox23">
<img class="ly-img23" src="img/2014.12.20-1.jpg">
</div>
</div>
<div class="ly-triangle23"></div>
</div>

? 源碼獲取

? ~ 關(guān)注我,點(diǎn)贊博文~ 每天帶你漲知識(shí)!

? 1.看到這里了就 [點(diǎn)贊+好評(píng)+收藏] 三連 支持下吧,你的「點(diǎn)贊,好評(píng),收藏」是我創(chuàng)作的動(dòng)力。

? 2.關(guān)注我~ 每天帶你學(xué)習(xí) :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者,一起探討 前端 Node 知識(shí),互相學(xué)習(xí)」!

? 3.以上內(nèi)容技術(shù)相關(guān)問(wèn)題可以相互學(xué)習(xí),可關(guān)注↓公Z號(hào) 獲取更多源碼 !

制作粉色少女系列?生日快樂(lè)祝福網(wǎng)頁(yè)?(HTML+CSS+JS)_生日快樂(lè)網(wǎng)頁(yè)制作html_08



?

本文摘自 :https://blog.51cto.com/r

開(kāi)通會(huì)員,享受整站包年服務(wù)立即開(kāi)通 >