如何做一个网页送给女朋友做生日礼物


如何做一个网页送给女朋友做生日礼物

本文里面涉及到python,HTML ,css,JavaScript的知识,是基于python的flask框架做的一个小型网站,里面可以实现跳转功能,怎么配置flask的环境变量,去官方文档看就好了,里面写的很详细

flask官方中文文档

然后这个是我们的一个总的框架如何做一个网页送给女朋友做生日礼物

其中static是用来存放我们的动态文件包括css,js,图片,音频等等,templates是用来存放html文件的,然后py文件是我们的后端,用来实现页面的跳转功能

#先设置一个变量,方便我们跳转
@app.route('/<int:id>', methods=['GET', 'POST'])
@app.route('/', methods=('GET', 'POST'))
def index(id=None):
global name, login
#然后发起一个post请求
if request.method == 'POST':
#判断请求的账户和密码,如果判断成功,那么跳到下一个页面去
if request.form.get('account') == 'admin' and request.form.get('pwd') == 'admin':
login = 'success'
name = 'admin'
return render_template('1.html', name=name, login=login)
else:
login = 'fail'
#到第二个页面,如果当检测出来post请求是520的话,后面跳到下一个页面,这样实现层层跳转
if id ==520:
return render_template('index.html')
if id ==1314:
return render_template('3.html')
return render_template('hellow.html')

这些就是后端的知识就那么多,然后接下来就是我们的登录界面,先看看效果图

如何做一个网页送给女朋友做生日礼物

设置账户和密码是在后端设置的,

具体代码如下:

if request.form.get('account') == 'admin' and request.form.get('pwd') == 'admin':

在成功输入账号和密码之后点击click me就是跳转到下一个页面了,这时候第二个页面的音乐播放器会被触发,就有背景音乐了,选对好路径,剩下就是往voice文件里面放歌,就可以随便切换自己想要的歌曲了

<audio autoplay="autoplay" loop="loop" preload="auto"

src="../static/voice/环游星空.mp3"></audio>
<a href="#" οnclick="delayURL('../SecondLucky/LuckyEvertime.html',1500)">

第二个页面如下:

如何做一个网页送给女朋友做生日礼物

这页面就是大家发挥你们的文化功底的时候了,各种土味情话直接往上面怼就好了

在1.html里面这个地方改你们想要的文字就好了

<div class="pyro">
<div class="before"></div>
<div class="after"></div>
</div>
<h1>一辈子很短,如白驹过隙,转瞬即逝</h1>
<h2>可这种心情很长,如高山大川,延绵不绝</h2>
<span>21岁,祝你生日快乐,天天快乐</span>
<div class="candle">
<div id="flame" class="lit"></div>
</div>

然后继续点击按钮,跳转到第三个页面如下:

如何做一个网页送给女朋友做生日礼物

这里是一个动态图册来的,需要注意的是,要有12张图片,分别为6张100**100像素的和*

6张400*400像素的,不然的尺寸不一样,就不好看了,用ps软件剪快一点

然后修改图片的位置如下:

<ul class="minbox">
<li><img src="../static/images/01.jpg" width="100" height="100"></li>
<li><img src="../static/images/02.jpg" width="100" height="100"></li>
<li><img src="../static/images/03.jpg" width="100" height="100"></li>
<li><img src="../static/images/04.jpg" width="100" height="100"></li>
<li><img src="../static/images/05.jpg" width="100" height="100"></li>
<li><img src="../static/images/06.jpg" width="100" height="100"></li>
</ul>
<ol class="maxbox">
<li><img src="../static/images/1.jpg" width="400" height="400"></li>
<li><img src="../static/images/2.jpg" width="400" height="400"></li>
<li><img src="../static/images/3.jpg" width="400" height="400"></li>
<li><img src="../static/images/4.jpg" width="400" height="400"></li>
<li><img src="../static/images/5.jpg" width="400" height="400"></li>
<li><img src="../static/images/6.jpg" width="400" height="400"></li>

.minbox li:nth-child(1){
background: url(../images/01.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
background: url(../images/02.jpg) no-repeat 0 0;
-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
background: url(../images/03.jpg) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
background: url(../images/04.jpg) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
background: url(../images/05.jpg) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
background: url(../images/06.jpg) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
background: url(../images/1.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
background: url(../images/2.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
background: url(../images/3.jpg) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
background: url(../images/4.jpg) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
background: url(../images/5.jpg) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
background: url(../images/6.jpg) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}

最后差不多的时候就是我们的重头戏了

如何做一个网页送给女朋友做生日礼物

在气氛渲染的不错的时候,最后就是我们的烟花重头戏了,这个烟花是动态烟花来的,用的是js来写的,还附带爆炸音效,让你的女朋友彻底感动,差不多就是这样了。毕竟礼物是一回事,重要的是那份心意,源码我放到github上面了,喜欢的可以给我点个赞吗,在GitHub上面点一下start就好了,你的支持是我更新的最大动力Thanks♪(・ω・)ノ

GitHub源代码

参考博客

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

如何做一个网页送给女朋友做生日礼物

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 如何做一个网页送给女朋友做生日礼物
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏