本文裡面涉及到python，HTML ，css,JavaScript的知識，是基於python的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')1234567891011121314151617181920

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

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

具體程式碼如下：

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

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

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

在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>1234567891011

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

這裡是一個動態圖冊來的，需要注意的是，要有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>123456789101112131415

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

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

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