程序員的浪漫，如何利用工作優勢送女朋友一份難忘的生日禮物

本文裡面涉及到python，HTML ，css,JavaScript的知識，是基於python的flask框架做的一個小型網站，裡面可以實現跳轉功能，怎麼配置flask的環境變量，去官方文檔看就好了，裡面寫的很詳細

這個是我們的一個總的框架

注意：需要圖片代碼的關注私信回覆“代碼 ”

其中static是用來存放我們的動態文件包括css,js,圖片，音頻等等，templates是用來存放html文件的，然後py文件是我們的後端，用來實現頁面的跳轉功能

<code>#先設置一個變量，方便我們跳轉註意：注意：
@app.route('/', 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')
1234567891011121314151617181920/<code>

這些就是後端的知識就那麼多，然後接下來就是我們的登錄界面，先看看效果圖

注意：需要圖片代碼的關注私信回覆“代碼 ”

設置賬戶和密碼是在後端設置的，

具體代碼如下：

<code>if request.form.get('account') == 'admin' and request.form.get('pwd') == 'admin':
1/<code>

在成功輸入賬號和密碼之後點擊click me就是跳轉到下一個頁面了，這時候第二個頁面的音樂播放器會被觸發，就有背景音樂了，選對好路徑，剩下就是往voice文件裡面放歌，就可以隨便切換自己想要的歌曲了

第二個頁面如下：

注意：需要圖片代碼的關注私信回覆“代碼 ”

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

在1.html裡面這個地方改你們想要的文字就好了

<code>


一輩子很短，如白駒過隙，轉瞬即逝
可這種心情很長，如高山大川，延綿不絕
21歲，祝你生日快樂，天天快樂

/<code>

然後繼續點擊按鈕，跳轉到第三個頁面如下：

注意：需要圖片代碼的關注私信回覆“代碼 ”

這裡是一個動態圖冊來的，需要注意的是，要有12張圖片，分別為6張100**100像素的和*

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

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

<code>


 


 


 




 


 


 

123456789101112131415
/<code>

<code>.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);
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748/<code>

最後差不多的時候就是我們的重頭戲了

注意：需要圖片代碼的關注私信回覆“代碼 ”

在氣氛渲染的不錯的時候，最後就是我們的煙花重頭戲了，這個煙花是動態煙花來的，用的是js來寫的，還附帶爆炸音效，讓你的女朋友徹底感動，差不多就是這樣了。