分享一个生日祝福网站源码,可以给她做了个网站作为生日祝福。主要是HTML、CSS、JS,修改了很多地方,现在作为模板放在这,希望能够对大家有所帮助。
源码链接:https://pan.baidu.com/s/1KOcCPmbsHpQcksJPqiAuZg
提取码:0325
效果图 >
修改密码 > 在birthday文件夹下,有js/index.js文件:
//修改此处的冰冰,0315即可修改登录的用户名和密码 if(userName=="冰冰" && pwd=="0315"){ event.preventDefault(); $('form').fadeOut(500); $('.wrapper').addClass('form-success'); setTimeout(function(){location.href="BirthdayCake.html";},2000); }
替换memories页面文字和图片 >(以第三屏为例)
<!--第三屏--> <div class="section"> <!-- 下面两个div分别实现的左边那条轴和那个小球 --> <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></p>包裹起来 --> <p> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-imgbox21"> <!-- 这里更改图片,图片请先改好对应的名字并且放到img文件夹下面 如果你不懂css,那么最好就裁剪图片至合适大小为止 如果你会css,那么可以根据class名字去修改对应css的宽度设置--> <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>
修改背景音乐 >
在BirthdayCake.html、index.html、Memories.html找到代码music/xx.mp3修改为自己想要的音乐就好了
如何给别人看
1. 打成压缩包发给别人
2. 部署至云服务器或者虚拟主机(需要域名,成本较高)
3. 部署至Gitee Pages(gitee在国内,速度快,微信不回拦截,无需域名和服务器/虚拟主机,几乎零成本)
分享到这了 自己可以修改背景和音乐呢 如果你觉得还可以请star 谢谢~~
- 海报