制作粉色少女系列 生日快乐祝福网页(HTML+CSS+JS)
生活随笔
收集整理的這篇文章主要介紹了
制作粉色少女系列 生日快乐祝福网页(HTML+CSS+JS)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
程序員愛情?520/表白/七夕情人節(jié)/求婚?專用html5+css3+js 生日快樂網(wǎng)站模板
HTML生日快樂祝福網(wǎng)頁模板,該模板有多種動態(tài)效果圖,全局采用藍色裝飾,適用于給女朋友的生日祝福,只需簡單修改,即可用網(wǎng)頁生成打開。
??0.生日演示地址?? 賬號是 cyl 密碼是 1007
??1.生日快樂????(多頁面html模板)★在線演示地址?? 賬號是 123 密碼是 123
??2.生日蛋糕????★在線演示地址??
??3.(生日快樂)蛋糕煙花+藍色夢幻海洋3D相冊????★在線演示地址??
H5 手機端
一,登錄頁面 (可自定義文字+圖片+音樂)
二,生日蛋糕頁面(可自定義文字+音樂)
三.浪漫表白頁面 (可自定義圖片+文字+音樂)
PC 電腦端
登錄頁
生日蛋糕頁面
浪漫表白頁面
修改密碼
在當(dāng)前目錄下,有js/index.js文件:
//修改此處的123,123即可修改登錄的用戶名和密碼 if(userName=="123" && pwd=="123"){ event.preventDefault(); $('form').fadeOut(500); $('.wrapper').addClass('form-success'); setTimeout(function(){location.href="BirthdayCake.html";},2000); }替換memories頁面文字和圖片
以第三屏為例:
<!--第三屏--><div class="section"> <!-- 下面兩個div分別實現(xiàn)的左邊那條軸和那個小球 --> <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>包裹起來 --> <p> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-imgbox21"> <!-- 這里更改圖片,圖片請先改好對應(yīng)的名字并且放到img文件夾下面 如果你不懂css,那么最好就裁剪圖片至合適大小為止 如果你會css,那么可以根據(jù)class名字去修改對應(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"> <!-- 與上面類似,不再多說 -->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>👇🏻👇🏻👇🏻更多源碼👇🏻👇🏻👇🏻
總結(jié)
以上是生活随笔為你收集整理的制作粉色少女系列 生日快乐祝福网页(HTML+CSS+JS)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 公众号H5 VUE获取CODE
- 下一篇: 浏览器插件检测淘宝订单是否淘客下单