如何做一個(gè)網(wǎng)頁送給女朋友做生日禮物！感動(dòng)到哭！

時(shí)間：2023-07-26 20:42:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-26 20:42:02 來源：網(wǎng)站運(yùn)營(yíng)

如何做一個(gè)網(wǎng)頁送給女朋友做生日禮物！感動(dòng)到哭?。?h2 data-first-child>如何做一個(gè)網(wǎng)頁送給女朋友做生日禮物本文里面涉及到python，HTML ，css,JavaScript的知識(shí)，是基于python的flask框架做的一個(gè)小型網(wǎng)站，里面可以實(shí)現(xiàn)跳轉(zhuǎn)功能，怎么配置flask的環(huán)境變量，去官方文檔看就好了，里面寫的很詳細(xì)

flask官方中文文檔

然后這個(gè)是我們的一個(gè)總的框架







其中static是用來存放我們的動(dòng)態(tài)文件包括css,js,圖片，音頻等等，templates是用來存放html文件的，然后py文件是我們的后端，用來實(shí)現(xiàn)頁面的跳轉(zhuǎn)功能

#先設(shè)置一個(gè)變量，方便我們跳轉(zhuǎn)@app.route('/<int:id>', methods=['GET', 'POST'])@app.route('/', methods=('GET', 'POST'))def index(id=None): global name, login #然后發(fā)起一個(gè)post請(qǐng)求 if request.method == 'POST': #判斷請(qǐng)求的賬戶和密碼，如果判斷成功，那么跳到下一個(gè)頁面去 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' #到第二個(gè)頁面，如果當(dāng)檢測(cè)出來post請(qǐng)求是520的話，后面跳到下一個(gè)頁面，這樣實(shí)現(xiàn)層層跳轉(zhuǎn) if id ==520: return render_template('index.html') if id ==1314: return render_template('3.html') return render_template('hellow.html')這些就是后端的知識(shí)就那么多，然后接下來就是我們的登錄界面，先看看效果圖







設(shè)置賬戶和密碼是在后端設(shè)置的，

具體代碼如下：

if request.form.get('account') == 'admin' and request.form.get('pwd') == 'admin':在成功輸入賬號(hào)和密碼之后點(diǎn)擊click me就是跳轉(zhuǎn)到下一個(gè)頁面了，這時(shí)候第二個(gè)頁面的音樂播放器會(huì)被觸發(fā)，就有背景音樂了，選對(duì)好路徑，剩下就是往voice文件里面放歌，就可以隨便切換自己想要的歌曲了

<audio autoplay="autoplay" loop="loop" preload="auto" src="../static/voice/環(huán)游星空.mp3"></audio> <a href="#" οnclick="delayURL('../SecondLucky/LuckyEvertime.html',1500)">第二個(gè)頁面如下：







這頁面就是大家發(fā)揮你們的文化功底的時(shí)候了，各種土味情話直接往上面懟就好了

在1.html里面這個(gè)地方改你們想要的文字就好了

<div class="pyro"><div class="before"></div><div class="after"></div></div><h1>一輩子很短，如白駒過隙，轉(zhuǎn)瞬即逝</h1><h2>可這種心情很長(zhǎng)，如高山大川，延綿不絕</h2><span>21歲，祝你生日快樂，天天快樂</span><div class="candle"><div id="flame" class="lit"></div></div>然后繼續(xù)點(diǎn)擊按鈕，跳轉(zhuǎn)到第三個(gè)頁面如下：







這里是一個(gè)動(dòng)態(tài)圖冊(cè)來的，需要注意的是，要有12張圖片，分別為6張100**100像素的和*

6張400*400像素的，不然的尺寸不一樣，就不好看了，用ps軟件剪快一點(diǎn)

然后修改圖片的位置如下：

<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);
}

最后差不多的時(shí)候就是我們的重頭戲了







在氣氛渲染的不錯(cuò)的時(shí)候，最后就是我們的煙花重頭戲了，這個(gè)煙花是動(dòng)態(tài)煙花來的，用的是js來寫的，還附帶爆炸音效，讓你的女朋友徹底感動(dòng)，差不多就是這樣了。畢竟禮物是一回事，重要的是那份心意,源碼我放到github上面了，喜歡的可以給我點(diǎn)個(gè)贊嗎，在GitHub上面點(diǎn)一下start就好了，你的支持是我更新的最大動(dòng)力Thanks?(?ω?)?

炫酷把 源碼已經(jīng)上傳了，源碼地址