birthday-blue
视频：传送门
说明
这是我最开始写的三个静态网页，你可以将其定制之后送给自己的朋友/对象/送完还是朋友的朋友/送完就变成对象的朋友，2333
因为只是我最开始送人所写的网页。所以会有不少问题，如果在使用过程中发现这些问题请见谅。
在线预览
http://blog.52cxwl.cn/wy/sr/
用户名：chuxin 密码：chuxin
使用前提
如果你具备前端开发的相关经验，那么可以自由地在这个模板上进行相关的修改，相信我当年写的代码能把你气个半死（手动滑稽，我现在自己看了也生气）
如果你不具备任何前端开发的经验，那么或许可以考虑换个东西送？
如果你只是简单了解相关知识，那么你可以阅读下面的引导来了解这个模板。
模板介绍
修改密码
在当前目录下，有jquery-1.8.4.min.js文件：
$('#login-button').click(function (event) {
var userName=document.getElementById("userName").value;
var pwd=document.getElementById("pwd").value;
// 进入密码 chuxin ，userName 为用户名 ，pwd为密码
if(userName=="chuxin" && pwd=="chuxin"){
event.preventDefault();
$('form').fadeOut(500);
$('.wrapper').addClass('form-success');
requestFullScreen();
setTimeout(function(){location.href="index1.html";},2000);
//auto_link_html("index1.html");
}
else{
alert("不对不对,你在想想，重新输入!");
}
});
function requestFullScreen(element) {
var element=document.documentElement;
// 判断各种浏览器，找到正确的方法
//alert(element.webkitRequestFullScreen);
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //Chrome等
element.mozRequestFullScreen || //FireFox
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
}
else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function changeFrameHeight(){
var ifm= document.getElementById("iframepage");
ifm.height=document.documentElement.clientHeight;
}
window.onresize=function(){
changeFrameHeight();
}
// function auto_link_html(url){
// var ifm = document.getElementById("frame_content");
// ifm.setAttribute("src", url);
// }
替换页面文字：js/indexl.js
替换页面图片：html/Memories.html
例程：
<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">时间过的真快啊</p>
<p class="ly-stxt03">一瞬即逝</p>
<p class="ly-stxt04">还记得小时候的不懂事</p>
<p class="ly-stxt05">历历在目</p>
</div>
<div class="ly-txt02">
<p class="ly-stxt06">仿佛像是发生在昨天</p>
<p class="ly-stxt07">时间往前走</p>
<p class="ly-stxt08">再也回不去了</p>
<p class="ly-stxt09">今日迎来您的大寿</p>
<p class="ly-stxt10">祝你：往下拉！</p>
</div>
</div>
</div>
<!--第二屏-->
<div class="section">
<div class="timeline"></div>
<div class="timepoint11"></div>
<div class="ly-box11">
<div class="ly-txt11" style="width:100%;height:10%;left:10%">
<img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
</div>
<div class="ly-txt12">
</div>
<div class="ly-imgbox11" style="height:80%">
<img class="ly-img11" src="../img/zt1.png" style="height:100%">
</div>
</div>
<div class="ly-triangle11"></div>
<div class="ly-box12">
<div class="ly-txt13" style="width:100%;height:10%;left:10%">
<img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
</div>
<div class="ly-txt14">
<p>寿星佬</p>
<p>我祝你所有的希望都能如愿</p>
<p>所有的梦想都能实现</p>
<p>所有的等候都能出现</p>
<p>所有的付出都能兑现在你生日来临之即</p>
</div>
<div class="ly-imgbox11" style="height:50%">
<img class="ly-img11" src="../img/timg.jpg" style="height:100%">
</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" style="width:100%;height:10%;left:10%">
<img class="ly-img11" src="../img/HappyBirthday.png" style="width:200%;height:100%">
</div>
<div class="ly-txt22" style="left:20%;font-size: 45px">
<p>祝</p>
<p>你</p>
</div>
<div class="ly-imgbox21">
<img class="ly-img21" src="../img/di2.png">
</div>
</div>
<div class="ly-triangle21"></div>
<div class="ly-box22">
<div class="ly-txt23" style="width:100%;height:10%;left:10%">
<img class="ly-img11" src="../img/HappyBirthday.png" style="width:200%;height:100%">
</div>
<div class="ly-txt24">
<p>百事可乐</p>
<p>万事芬达</p>
<p>天天哇哈哈</p>
<p>月月乐百事</p>
</div>
<div class="ly-imgbox22">
<img class="ly-img22" src="../img/di21.jpg">
</div>
</div>
<div class="ly-triangle22"></div>
<div class="ly-box23">
<div class="ly-txt25" style="width:100%;height:10%;left:10%">
<img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
</div>
<div class="ly-txt26">
<p>年年高乐高</p>
<p>心情似雪碧</p>
<p>永远心飞扬</p>
</div>
<div class="ly-imgbox23" style="height: 70%">
<img class="ly-img23" src="../img/di24.jpg" style="height: 100%">
</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" style="width:100%;height:10%;left:10%">
<img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
</div>
<div class="ly-txt32">
<p>祝你：</p>
<p>福如东海老王八,啦啦啦！！！</p>
<p> 寿比南山大石头,啦啦！！！</p>
</div>
<div class="ly-imgbox31" style="height:50%">
<img class="ly-img31" src="../img/di22.jpg" style="height:100%">
</div>
</div>
<div class="ly-triangle31"></div>
<div class="ly-box32">
<div class="ly-txt33" style="width:100%;height:15%;left:10%">
<img class="ly-img11" src="../img/HappyBirthday.png" style="width:100%;height:100%">
</div>
<div class="ly-txt34">
<p>祈望你心灵深处芳草永绿，青春常驻，笑口常开。祝你生日快乐，健康幸福！</p>
</div>
<div class="ly-imgbox31">
<img class="ly-img31" src="../img/di23.jpg" style="height:100%">
</div>
</div>
<div class="ly-triangle32"></div>
</div>如何给别人看
- 打成压缩包发给别人
- 部署至云服务器或者虚拟主机
- 部署云服务器需要拥有一台自己的云服务器。部署方式有很多种，这里推荐两种：
- 使用Tomcat部署:
在服务器下载解压tomcat，解压后打开webapps文件夹，然后新建一个英文名称的文件夹(称为路径名)，下载此项目后将当前目录（注意，只拷贝文件，含有index.html在内的这些html和css，js之类的拷贝到刚才新建的文件夹内，重启tomcat即可。） - 使用nginx部署：
方式类似，不扯了，可以自行去百度查。
- 使用Tomcat部署:
- 部署至虚拟主机，在虚拟主机购买商处会有教程
- 部署云服务器需要拥有一台自己的云服务器。部署方式有很多种，这里推荐两种：
如果需要用域名访问，请先去购买域名，然后按照教程进行解析。
注意点
请使用Google Chrome浏览器！
没有手机版！
开发计划
- 修改Memories页面布局，保证宽屏适应。
- 注意浏览器兼容性。
- 注意在手机上的表现。
- memories模块动态生成。
这些都是有空之后会慢慢做的，欢迎持续关注~
————————————————————————————————————————————————
文件来自于网络，看到觉得挺好的 博主就采用了
另外一款粉色：
适用于送女朋友/表白/祝福/少女心系列
文件下载
