知名网站建设定制恋爱周年纪念日-送给女友的网页

一、知名网站建设定制在本科期间有一次学习知名网站建设定制制作网页的机会，知名网站建设定制实训期间两周，知名网站建设定制任务是利用HTML知名网站建设定制语言做一个小网页。知名网站建设定制当时感觉老师讲的认真，知名网站建设定制就挺感兴趣的，知名网站建设定制就从头到尾把整个课程听完了。知名网站建设定制研究生专业是海上通信，知名网站建设定制最近是和女友的恋爱六知名网站建设定制周年纪念日，知名网站建设定制打算做一个有意义东西送给她，知名网站建设定制就琢磨把之前学习的HTML知名网站建设定制语言应用一下，知名网站建设定制做个网页送给她。

知名网站建设定制由于不是专业的，知名网站建设定制在编写代码过程参考了一些博主的实例，各位伙伴在阅读过程中发现有问题的地方，欢迎指正，大家共同进步~

二、言归正传，做这个网页的目的是为了能够直接在浏览器上输入网址，然后直接弹出我制作网页的主页，通过主页上的选项卡，连接各个网页。我了解到要实现这个目的，要首先解决的问题是前后端的问题，由于之前学习过Python，我最终选择了Flask作为开发网页的后端，Flask是一个使用 Python 编写的轻量级 Web 应用框架；利用HTML加上.css和.js脚本作为前段开发。

1、首先我设计的是一个登录的页面，如下图所示。首先，要登录自己的账号和密码，账号可以设计成字母或者数字什么的，当然是随意设置的，因为毕竟就是给她一个人的；密码我设置成了我们的周年纪念日，搞点小惊喜~

附上后端Python代码：

  1. from flask import *
  2.  
  3. app = Flask(__name__)
  4.  
  5. name = ''
  6. login = ''
  7. @app.route('/<int:id>', methods=['GET', 'POST'])
  8. @app.route('/',         methods=('GET', 'POST'))
  9. def index(id=None):
  10.     global name, login
  11.     if request.method == 'POST':
  12.         # 如果密码输入正确进入-主页面 main.html
  13.         if request.form.get('account') == 'zsz&wxf' and request.form.get('pwd') == '20160608':
  14.             login = 'success'
  15.             name  = 'admin'
  16.             return render_template('Login_main_page.html')
  17.         else:
  18.             login = 'fail'
  19.         if id == 1:
  20.             return render_template('Login_main_page.html')
  21.         if id == 3:
  22.             return render_template('Our_Journey.html')
  23.         if id == 4:
  24.             return render_template('loving_heart.html')
  25.         if id == 5:
  26.             return render_template('fireworks.html')
  27.         if id == 6:
  28.             return render_template('working_process.html')
  29.  
  30.     return render_template('account_information.html')
  31.  
  32. if __name__ == '__main__':
  33.     app.run()

附上登录页面（account_information）的HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <meta charset="utf-8">
  4.     <head>
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6.         <meta http-equiv="content-type" content="text/html;charset=utf-8">
  7.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8.         <title>欢迎来到我的世界</title>
  9.         <link href="../static/account_information_css/style.css" rel="stylesheet" type="text/css">
  10.         <script type="text/javascript" src="../static/account_information_js/vector.js"></script>
  11.     </head>
  12.     <!--------------------------------插入背景-------------------------------->
  13.     <style type="text/css">
  14.          body{
  15.             background-image:url("/static/1.images/account_information/风景.jpg");
  16.             background-size:cover;
  17.          }
  18.      </style>
  19.     <!------------------------------内容在这里修改----------------------------->
  20.     <body>
  21.         <div id="container">
  22.             <div id="output">
  23.                 <div class="containerT">
  24.                     <h1><font color='orange' ><p style="text-align:center"><i>Happy sixth anniversary</i></p></font></h1>
  25.                     <form action="/" class="form" id="entry_form" method="post">
  26.                         <h2><p style="text-align:center"><input type="text" placeholder="账号" name="account" style="height:30px"></p></h2><br>
  27.                         <h3><p style="text-align:center"><input type="password" placeholder="密码"  name="pwd" style="height:30px"></p></h3><br>
  28.                     <center> <button> <h4> Click me ✧ </h4> </button> </center>
  29.                     </form>
  30.                 </div>
  31.             </div>
  32.         </div>
  33.     </body>
  34. </html>

2、成功登录页面后，显示的是主页，如图所示。一共有照片墙、历程、我说、浪漫烟花和制作过程选项卡。

 附上主页面（account_information）的HTML代码：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7. 		<title>故事小屋</title>
  8.  
  9. 		<link rel="icon" href="../static/1.images/login_main_page/爱心.png" type="image/x-icon"/>
  10. 		<link href="../static/login_main_page_css/bootstrap.min.css" rel="stylesheet">
  11. 		<script src="../static/login_main_page_js/jquery-3.3.1.min.js"></script>
  12. 		<script src="../static/login_main_page_js/bootstrap.min.js"></script>
  13. 		<script src="../static/login_main_page_js/shubiaoaixin.js"></script>
  14. 		<link href= "../static/login_main_page_css/header.css" rel="stylesheet">
  15. 	</head>
  16.  
  17. 	<style type="text/css">
  18. 	    .header_right
  19. 	    {
  20. 	        //margin-left:1px;
  21. 			//margin-top: 1px;
  22. 	    }
  23. 		.middle{
  24. 			width: 35%;
  25. 			margin-left:900px;
  26. 			margin-top: 1px;
  27. 			margin: 0 auto;
  28. 		}
  29. 		.container-fluid {
  30. 			padding: 0;
  31. 		}
  32. 		.fenge{
  33. 			text-align: center;
  34. 			color: #DCA7A7;
  35. 			font-size:16px;
  36. 			margin-top: 20px;;
  37. 		}
  38. 		.maodian{
  39. 			width:80%;
  40. 			height: 200px;
  41. 			margin: 0 auto;
  42. 		    background:#f5deb3;
  43. 			font-size:20px;
  44. 			color: #E7C3C3;
  45. 			margin-top:10px;
  46. 			margin-bottom: 10px;
  47. 		}
  48. 		#times{
  49. 			text-align: center;
  50. 			padding-top: 30px;
  51. 		}
  52. 		.wenzi_a{
  53. 			float: left;
  54. 			margin-left:200px;
  55. 			margin-top: 0px;
  56. 		}
  57. 		.wenzi_b{
  58. 			float: left;
  59. 			margin-left:150px;
  60. 			margin-top: 0px;
  61. 		}
  62. 		.wenzi_c{
  63. 			float: left;
  64. 			margin-left:150px;
  65. 			margin-top: 0px;
  66. 		}
  67. 		.wenzi_d{
  68. 			float: left;
  69. 			margin-left:150px;
  70. 			margin-top: 0px;
  71. 		}
  72. 		.wenzi_font{
  73. 		    color:#00bfff;
  74. 		    margin-left:0px;
  75. 			margin-top: 10px;
  76. 		    writing-mode: tb-rl;
  77. 		    line-height:21px
  78. 		}
  79.  
  80. 	</style>
  81. 	<!------------------------照片背景------------------------>
  82.     <style type="text/css">
  83.                 html,body
  84.                 {
  85.                     height: 100%;
  86.                     color: #00FF00;
  87.                 }
  88.                 body
  89.                 {
  90.                     background-size: cover;
  91.                     background-image:url("/static/1.images/login_main_page/高架桥.jpg")
  92.  
  93.                 }
  94.         </style>
  95. 	    <style type="text/css">
  96. 				button
  97. 				{
  98. 				    width:300px;
  99.                     height:50px;
  100.                     font-size:19px;
  101.                     line_height:36px;
  102.                     border:1px solid transparent;
  103.                     color:#8b4513;                   /* 按钮文字颜色*/
  104.                     background-color:transparent;    /* 按钮背景颜色*/
  105.                     //background-color:pink;
  106.                     border-color: none;              /* 按钮边框颜色*/
  107. 				}
  108.         </style>
  109. 	<body>
  110.         <!--<input type="submit" value="post请求" name="bow"/>-->
  111. 	    <audio autoplay="autoplay" loop="loop" preload="auto"
  112. 		src="../static/2.music/Masque_Jupiter.mp3"></audio>
  113. 			<!--1.四个选项卡 首页、照片墙、历程、我说  -->
  114. 			<div class="header">
  115. 				    <!--0.Happy sixth anniversary-->
  116. 					<div class="logo">
  117. 					<form action="/1" method="post">
  118. 						<button style="font-size:24px;">
  119. 									 <font  color=#8b4513 >
  120. 										  <i><b>Happy sixth anniversary</b></i>
  121. 									 </font>
  122. 						</button>
  123. 					</form>
  124. 					</div>
  125. 				    <!--1.首页-->
  126. 				    <div class="logo">
  127. 				    <form action="/1" method="post">
  128. 						<button style="width:180px;">
  129. 							<font color=#d2691e >
  130. 								<b>首页</b>
  131. 							</font>
  132. 						</button>
  133. 					</form>
  134. 					</div>
  135. 				    <!--2.照片墙-->
  136. 				    <div class="logo">
  137. 				    <form action="/2" method="post">
  138. 						<button style="width:140px;">
  139. 								<a href="https://aimeike.tv/video/RZLLH" style="color: #d2691e;">照片墙</a>
  140. 						</button>
  141. 					</form>
  142. 					</div>
  143. 				    <!--3.历程-->
  144. 				    <div class="logo">
  145. 				    <form action="/3" method="post">
  146. 						<button style="width:140px;">
  147. 								<font color=#d2691e >
  148. 								历程
  149. 								</font>
  150. 						</button>
  151. 					</form>
  152. 					</div>
  153. 				    <!--4.我说-->
  154. 				    <div class="logo">
  155. 				    <form action="/4" method="post">
  156. 						<button style="width:140px;">
  157. 							<font  color=#d2691e >
  158. 								我说
  159. 							</font>
  160. 						</button>
  161. 					</form>
  162. 					</div>
  163. 				    <!--5.浪漫烟花-->
  164. 				    <div class="logo">
  165. 				    <form action="/5" method="post">
  166. 						<button style="width:150px;">
  167. 							 <font  color=#d2691e >
  168. 								浪漫烟花
  169. 							 </font>
  170. 						</button>
  171. 					</form>
  172. 					</div>
  173. 				    <!--6.制作过程-->
  174. 				    <div class="logo">
  175. 				    <form action="/6" method="post">
  176. 						<button style="width:160px;">
  177. 							<font  color=#d2691e >
  178. 								制作过程
  179. 							</font>
  180. 						</button>
  181. 					</form>
  182. 					</div>
  183. 			    </div>
  184.  
  185. 		<!--  3.四个段文字 我们的相册、我们的历程、我想说、制作过程  -->
  186. 		<div id="times"></div>
  187. 				<div class="wenzi_a">
  188. 					<img src="../static/1.images/login_main_page/相册.png" >
  189. 					<span><font size="4" color=#000000><b>&nbsp;&emsp;我们的相册</b></font></span>
  190.  
  191. 					<div class="wenzi_font">
  192. 						<font size="3"><b>
  193. 						举目望向天空，有说不尽的美好。<br/>
  194. 						夏天来临之前，温暖洒满了一地。<br/>
  195. 						轻轻翻阅发黄的书卷，斑驳往事。<br/>
  196. 						抓住午后跳跃的阳光，锁住流年。<br/>
  197. 						到底是怎样一种繁华创造了永恒？<br/>
  198. 						夏日的夕阳将天空染成了橘色。<br/>
  199. 						我们走过的路上，落满一地的幸福。<br/>
  200. 						</b></font>
  201. 						<font size="3" color = #696969><b>学术规范标注参考文献<br/>
  202. 						&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——来自《百度百科》</b></font>
  203. 						</div>
  204. 					</div>
  205. 				</div>
  206. 				<div class="wenzi_b">
  207. 					<img src="../static/1.images/login_main_page/历程.png" >
  208. 					<span><font size="4" color=#000000><b>&nbsp;我们的历程</b></font></span>
  209. 					<div class="wenzi_font">
  210. 					<font size="3"><b>
  211. 					时光的洪流把每个人的生命印刻成一<br/>
  212. 					枚枚底片。记忆沿着掌心的脉络聚成<br/>
  213. 					一幅幅永恒的画面。这些光怪陆离的<br/>
  214. 					记忆中最令我怀念的就是，最美的你<br/>
  215. 					陪我走过最绚烂的年华。<br/>
  216. 					</b></font>
  217. 					<font size="3" color = #696969><b>学术规范标注参考文献<br/>
  218. 					&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——来自《豆瓣》</b></font>
  219. 					</div>
  220. 				</div>
  221. 				<div class="wenzi_c">
  222. 					<img src="../static/1.images/login_main_page/气泡.png" >
  223. 					<span><font size="4" color=#000000><b>&nbsp;&emsp;我想说</b></font></span>
  224. 					<div class="wenzi_font">
  225. 					<font size="3"><b>
  226. 					呯呯的心跳却总能代表我的情意。<br/>
  227. 					想说爱你其实真的很遥远，傍山 <br/>
  228. 					涉水地追求，可能才是我的目的。<br/>
  229. 					想说爱你只是想真心对待你，<br/>
  230. 					想说爱你只是想真实地表达自己。<br/>
  231. 					</b></font>
  232. 					<font size="3" color = #696969><b>学术规范标注参考文献<br/>
  233. 					&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——来自《贴吧》</b></font>
  234. 					</div>
  235. 				</div>
  236. 				<div class="wenzi_d">
  237. 							<img src="../static/1.images/login_main_page/HTML.png" >
  238. 							<span><font size="4" color=#000000><i>&nbsp;网页制作过程</i></font></span>
  239. 							<div class="wenzi_font">
  240. 								<font size="3" color = #00bfff>
  241. 								<b>
  242. 								前面以上的文字均来自百度，  <br/>
  243. 								原谅我即时在这种特殊的日子  <br/>
  244. 								也说不出来一句“像样的”言语。<br/>
  245. 								我平时已经说的够多了，为了  <br/>
  246. 								让记忆永存，我自学了网页语  <br/>
  247. 								言编写了这个网站。制作过程  <br/>
  248. 								过程费尽心血和精力，但一切  <br/>
  249. 								都是得的。<br/>
  250. 								</b>
  251. 								</font>
  252. 							</div>
  253. 				</div>
  254. 	</body>
  255. </html>

3.第一个选项卡“照片墙”，连接的是我之前制作的一个相册，是在“爱美刻”做的，可以任意链接，例如说：百度、QQ空间...

 3. 第二个选项卡是“历程”，里面写了一些我们六年的经历，小伙伴们也可以这么做，记录一下彼此的点滴，下图所示。

 

 附上（our_journey）的代码：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7. 		<title>历程小屋</title>
  8. 		<link rel="icon" href="../static/1.images/login_main_page/爱心.png" type="image/x-icon"/>
  9. 		<link href="../static/login_main_page_css/bootstrap.min.css" rel="stylesheet">
  10. 		<script src="../static/login_main_page_js/jquery-3.3.1.min.js"></script>
  11. 		<script src="../static/login_main_page_js/bootstrap.min.js"></script>
  12. 		<script src="../static/login_main_page_js/shubiaoaixin.js"></script>
  13. 		<link  href="../static/login_main_page_css/header.css" rel="stylesheet">
  14. 	</head>
  15. 	<style type="text/css">
  16. 	    .header_right
  17. 	    {
  18. 	        margin-left:1px;
  19. 			margin-top: 1px;
  20. 	    }
  21. 		.thumbnail{
  22. 			margin-bottom: 0px;
  23. 		}
  24. 		.words{
  25. 			font-size: 20px;
  26. 			font-weight: 1000;
  27. 			font-family: "楷体";
  28. 			color: #a0522d;
  29. 			line-height:40px;
  30. 			max-width: 1150px;
  31. 		}
  32. 		.panel-default{
  33. 			width: 80%;
  34. 			margin: 0 auto;
  35. 		}
  36. 		.panel-body
  37. 		{
  38. 			background: wheat;
  39. 		}
  40. 		.panel-default>.panel-heading {
  41. 			//color:#996633;
  42. 			background-color:#996633;
  43. 			border-color: #ebccd1;
  44. 		}
  45. 	</style>
  46. 	<style type="text/css">
  47.                 html,body
  48.                 {
  49.                     height: 100%;
  50.                     color: #00FF00;
  51.                 }
  52.                 body
  53.                 {
  54.                     background-size: cover;
  55.                     background-image:url("/static/1.images/our_journey/图书博物馆.jpg")
  56.                 }
  57.         </style>
  58. 		<style type="text/css">
  59. 				button
  60. 				{
  61. 				    width:300px;
  62.                     height:50px;
  63.                     font-size:18px;
  64.                     line_height:36px;
  65.                     border:1px solid transparent;
  66.                     color:#ffffff;                   /* 按钮文字颜色*/
  67.                     background-color:transparent;    /* 按钮背景颜色*/
  68.                     //background-color:pink;
  69.                     border-color: none;              /* 按钮边框颜色*/
  70. 				}
  71.         </style>
  72. 	<body>
  73. 	   <form action="/2" method="post">
  74. 	   <audio autoplay="autoplay" loop="loop" preload="auto" src="../static/2.music/晚风.mp3"></audio>
  75.        <!--1.四个选项卡 首页、照片墙、历程、我说  -->
  76. 		   <div class="header">
  77. 				    <!--0.Happy sixth anniversary-->
  78. 					<div class="logo">
  79. 					<form action="/1" method="post">
  80. 						<button style="font-size:24px;">
  81. 							<font color = white >
  82. 								<i><b>Happy sixth anniversary</b></i>
  83. 							</font>
  84. 						</button>
  85. 					</form>
  86. 					</div>
  87. 				    <!--1.首页-->
  88. 				    <div class="logo">
  89. 				    <form action="/1" method="post">
  90. 						<button style="width:150px;">
  91. 							<font color = white >
  92. 								首页
  93. 							</font>
  94. 						</button>
  95. 					</form>
  96. 					</div>
  97. 				    <!--2.照片墙-->
  98. 				    <div class="logo">
  99. 				    <form action="/2" method="post">
  100. 						<button style="width:140px;" >
  101. 							<a href="https://aimeike.tv/video/RZLLH" style="color: white;">照片墙</a>
  102. 						</button>
  103. 					</form>
  104. 					</div>
  105. 				    <!--3.历程-->
  106. 				    <div class="logo">
  107. 				    <form action="/3" method="post">
  108. 						<button style="width:140px;">
  109. 								<font color = white >
  110. 								<b>
  111. 								   历程
  112. 								</b>
  113. 								</font>
  114. 						</button>
  115. 					</form>
  116. 					</div>
  117. 				    <!--4.我说-->
  118. 				    <div class="logo">
  119. 				    <form action="/4" method="post">
  120. 						<button style="width:140px;">
  121. 							<font  color = white >
  122. 								我说
  123. 							</font>
  124. 						</button>
  125. 					</form>
  126. 					</div>
  127. 				    <!--5.浪漫烟花-->
  128. 				    <div class="logo">
  129. 				    <form action="/5" method="post">
  130. 						<button style="width:150px;">
  131. 							 <font  color = white >
  132. 								浪漫烟花
  133. 							 </font>
  134. 						</button>
  135. 					</form>
  136. 					</div>
  137. 				    <!--6.制作过程-->
  138. 				    <div class="logo">
  139. 				    <form action="/6" method="post">
  140. 						<button style="width:160px;">
  141. 							<font  color = white>
  142. 								制作过程
  143. 							</font>
  144. 						</button>
  145. 					</form>
  146. 					</div>
  147. 			</div>
  148. 			<!----------历程选项卡---------->
  149.             <!--<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">-->
  150. 			      <!----------选项卡 1---------->
  151. 				  <div class="panel panel-default">
  152. 					<div class="panel-heading" role="tab" id="headingOne">
  153. 					  <h4 class="panel-title">
  154. 						<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  155. 							<i>&emsp;2016 &emsp;年&emsp;6&emsp;月&emsp;8&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  156. 						</span>
  157. 					  </h4>
  158. 					</div>
  159. 					<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  160. 					  <div class="panel-body">
  161. 						<div class="row">
  162. 							<div class="col-xs-6 col-md-3">
  163. 								<p class="thumbnail">
  164. 									<img src="../static/1.images/our_journey/照片1.png">
  165. 									<img src="../static/1.images/our_journey/照片2.png">
  166. 								</p>
  167. 						    </div>
  168. 							<div class="words">
  169. 							<br/>
  170. 							<br/>
  171. 							在这里写上你想说的话.........
  172. 							</div>
  173. 						</div>
  174. 					  </div>
  175. 					</div>
  176. 				  </div>
  177. 			      <!----------选项卡 2---------->
  178. 				  <div class="panel panel-default">
  179. 					<div class="panel-heading" role="tab" id="headingTwo">
  180. 					  <h4 class="panel-title">
  181. 						<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
  182. 						  <i>&emsp;2016&emsp;年&emsp;6&emsp;月&emsp;24&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  183. 						</span>
  184. 					  </h4>
  185. 					</div>
  186. 					<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
  187. 						<div class="panel-body">
  188. 							<div class="row">
  189. 								<div class="col-xs-6 col-md-3">
  190. 									<p class="thumbnail">
  191. 										<img src="../static/1.images/our_journey/照片5.jpg">
  192. 									</p>
  193. 							    </div>
  194. 								<div class="words" style="margin-left:325px;">
  195.                                 在这里写上你想说的话.........
  196. 								</div>
  197. 							</div>
  198. 						</div>
  199. 					</div>
  200. 				</div>
  201. 			    <!----------选项卡 3---------->
  202. 			    <div class="panel panel-default">
  203. 					<div class="panel-heading" role="tab" id="headingThree">
  204. 					  <h4 class="panel-title">
  205. 						<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
  206. 						 <i>&emsp;2016&emsp;年&emsp;7&emsp;月&emsp;13&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  207. 						</span>
  208. 					  </h4>
  209. 					</div>
  210. 					<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
  211. 						<div class="panel-body">
  212. 							<div class="row">
  213. 								<div class="col-xs-6 col-md-3">
  214. 									<p class="thumbnail">
  215. 										<img src="../static/1.images/our_journey/照片6.jpg">
  216. 									</p>
  217. 								</div>
  218. 								<div class="words">
  219. 								在这里写上你想说的话.........
  220. 								</div>
  221. 							</div>
  222. 						</div>
  223. 					</div>
  224. 			    </div>
  225. 			    <!----------选项卡 4---------->
  226. 				<div class="panel panel-default">
  227. 				  		<div class="panel-heading" role="tab" id="headingFour">
  228. 				  		  <h4 class="panel-title">
  229. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
  230. 				  			  <i>&emsp;2016&emsp;年&emsp;9&emsp;月&emsp;1&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  231. 				  			</span>
  232. 				  		  </h4>
  233. 				  		</div>
  234. 				  		<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour  ">
  235. 				  			<div class="panel-body">
  236. 				  				<div class="row">
  237. 				  					<div class="col-xs-6 col-md-3">
  238. 										<p class="thumbnail">
  239. 				  							<img src="../static/1.images/our_journey/照片7.jpg">
  240. 											<img src="../static/1.images/our_journey/照片8.jpg">
  241. 										</p>
  242. 				  				    </div>
  243. 				  					<div class="words">
  244. 										在这里写上你想说的话.........
  245. 				  					</div>
  246. 				  				</div>
  247. 				  			</div>
  248. 				  		</div>
  249. 				</div>
  250. 			    <!----------选项卡 5---------->
  251. 			    <div class="panel panel-default">
  252. 				  		<div class="panel-heading" role="tab" id="headingFive">
  253. 				  		  <h4 class="panel-title">
  254. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
  255. 				  			  <i>&emsp;2016&emsp;年&emsp;12&emsp;月&emsp;3&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  256. 				  			</span>
  257. 				  		  </h4>
  258. 				  		</div>
  259. 				  		<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
  260. 				  			<div class="panel-body">
  261. 				  				<div class="row">
  262. 				  					<div class="col-xs-6 col-md-3">
  263. 										<p class="thumbnail">
  264. 											<!--<img src="../static/1.images/our_journey/照片9.jpg">-->
  265. 											<img src="../static/1.images/our_journey/照片10.jpg">
  266. 											</p>
  267. 				  				    </div>
  268. 				  					<div class="words">
  269. 				  					在这里写上你想说的话.........
  270. 				  					</div>
  271. 				  				</div>
  272. 				  			</div>
  273. 				  		</div>
  274. 				</div>
  275. 			    <!----------选项卡 6---------->
  276. 				<div class="panel panel-default">
  277. 				  		<div class="panel-heading" role="tab" id="headingSix">
  278. 				  		  <h4 class="panel-title">
  279. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="true" aria-controls="collapseSix">
  280. 				  			  <i>&emsp;2017&emsp;年&emsp;4&emsp;月&emsp;9&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  281. 				  			</span>
  282. 				  		  </h4>
  283. 				  		</div>
  284. 				  		<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
  285. 				  			<div class="panel-body">
  286. 				  				<div class="row">
  287. 				  					<div class="col-xs-6 col-md-3">
  288. 										<p class="thumbnail">
  289. 				  							<img src="../static/1.images/our_journey/照片11.png">
  290. 										</p>
  291. 				  				    </div>
  292. 				  					<div class="words">
  293. 				  					在这里写上你想说的话.........
  294. 				  					</div>
  295. 				  				</div>
  296. 				  			</div>
  297. 				  		</div>
  298. 				</div>
  299. 			   <!----------选项卡 7---------->
  300. 				<div class="panel panel-default">
  301. 				  		<div class="panel-heading" role="tab" id="headingSeven">
  302. 				  		  <h4 class="panel-title">
  303. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="true" aria-controls="collapseSeven">
  304. 				  			  <i>&emsp;2018&emsp;年&emsp;5&emsp;月&emsp;1&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  305. 				  			</span>
  306. 				  		  </h4>
  307. 				  		</div>
  308. 				  		<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
  309. 				  			<div class="panel-body">
  310. 				  				<div class="row">
  311. 				  					<div class="col-xs-6 col-md-3">
  312. 										<p class="thumbnail">
  313. 				  							<img src="../static/1.images/our_journey/照片12.png">
  314. 											<br/>
  315. 											<img src="../static/1.images/our_journey/照片13.png">
  316. 										</p>
  317. 				  				    </div>
  318. 				  					<div class="words">
  319. 										<br/>
  320. 										<br/>
  321. 				  						在这里写上你想说的话.........
  322. 				  					</div>
  323. 				  				</div>
  324. 				  			</div>
  325. 				  		</div>
  326. 			 	</div>
  327. 			    <!----------选项卡 8---------->
  328. 				<div class="panel panel-default">
  329. 					<div class="panel-heading" role="tab" id="headingEight">
  330. 					  <h4 class="panel-title">
  331. 						<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEight" aria-expanded="true" aria-controls="collapseEight">
  332. 						  <i>&emsp;2018&emsp;年&emsp;6&emsp;月&emsp;10&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  333. 						</span>
  334. 					  </h4>
  335. 					</div>
  336. 					<div id="collapseEight" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingEight">
  337. 						<div class="panel-body">
  338. 							<div class="row">
  339. 								<div class="col-xs-6 col-md-3">
  340. 									<p class="thumbnail">
  341. 										<img src="../static/1.images/our_journey/照片14.png">
  342. 									</p>
  343. 							    </div>
  344. 								<div class="words">
  345. 								在这里写上你想说的话.........
  346. 								</div>
  347. 							</div>
  348. 						</div>
  349. 					</div>
  350. 			    </div>
  351. 			    <!----------选项卡 9---------->
  352. 				<div class="panel panel-default">
  353. 				  		<div class="panel-heading" role="tab" id="headingNinth">
  354. 				  		  <h4 class="panel-title">
  355. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseNinth" aria-expanded="true" aria-controls="collapseNinth">
  356. 				  			  <i>&emsp;2018&emsp;年&emsp;7&emsp;月&emsp;17&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  357. 				  			</span>
  358. 				  		  </h4>
  359. 				  		</div>
  360. 				  		<div id="collapseNinth" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingNinth">
  361. 				  			<div class="panel-body">
  362. 				  				<div class="row">
  363. 				  					<div class="col-xs-6 col-md-3">
  364. 										<p class="thumbnail">
  365. 				  							<img src="../static/1.images/our_journey/照片15.png">
  366. 											<img src="../static/1.images/our_journey/照片16.png">
  367. 										</p>
  368. 				  				    </div>
  369. 				  					<div class="words">
  370. 				  					在这里写上你想说的话.........
  371. 				  					</div>
  372. 				  				</div>
  373. 				  			</div>
  374. 				  		</div>
  375. 				</div>
  376. 			    <!----------选项卡 10---------->
  377. 				<div class="panel panel-default">
  378. 				  		<div class="panel-heading" role="tab" id="headingTen">
  379. 				  		  <h4 class="panel-title">
  380. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTen" aria-expanded="true" aria-controls="collapseTen">
  381. 				  			  <i>&emsp;2019&emsp;年&emsp;12&emsp;月&emsp;26&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  382. 				  			</span>
  383. 				  		  </h4>
  384. 				  		</div>
  385. 				  		<div id="collapseTen" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTen">
  386. 				  			<div class="panel-body">
  387. 				  				<div class="row">
  388. 				  					<div class="col-xs-6 col-md-3">
  389. 										<p class="thumbnail">
  390. 				  							<img src="../static/1.images/our_journey/照片17.jpg">
  391. 										</p>
  392. 				  				    </div>
  393. 				  					<div class="words">
  394.                                     在这里写上你想说的话.........
  395. 				  					</div>
  396. 				  				</div>
  397. 				  			</div>
  398. 				  		</div>
  399. 				</div>
  400. 			    <!----------选项卡 11---------->
  401. 			    <div class="panel panel-default">
  402. 				  		<div class="panel-heading" role="tab" id="headingEleven">
  403. 				  		  <h4 class="panel-title">
  404. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEleven" aria-expanded="true" aria-controls="collapseEleven">
  405. 				  			  <i>&emsp;2020&emsp;年&emsp;7&emsp;月&emsp;18&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  406. 				  			</span>
  407. 				  		  </h4>
  408. 				  		</div>
  409. 				  		<div id="collapseEleven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingEleven">
  410. 				  			<div class="panel-body">
  411. 				  				<div class="row">
  412. 				  					<div class="col-xs-6 col-md-3">
  413. 										<p class="thumbnail">
  414. 				  							<img src="../static/1.images/our_journey/照片18.jpg">
  415. 										</p>
  416. 				  				    </div>
  417. 				  					<div class="words">
  418.                                     在这里写上你想说的话.........
  419. 				  					</div>
  420. 				  				</div>
  421. 				  			</div>
  422. 				  		</div>
  423. 				</div>
  424. 			   	<!----------选项卡 12---------->
  425. 			    <div class="panel panel-default">
  426. 				  		<div class="panel-heading" role="tab" id="headingThirteen">
  427. 				  		  <h4 class="panel-title">
  428. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThirteen" aria-expanded="true" aria-controls="collapseThirteen">
  429. 				  			  <i>&emsp;2021&emsp;年&emsp;3&emsp;月&emsp;1&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  430. 				  			</span>
  431. 				  		  </h4>
  432. 				  		</div>
  433. 				  		<div id="collapseThirteen" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThirteen">
  434. 				  			<div class="panel-body">
  435. 				  				<div class="row">
  436. 				  					<div class="col-xs-6 col-md-3">
  437. 										<p class="thumbnail">
  438. 				  							<img src="../static/1.images/our_journey/照片19.png">
  439. 										</p>
  440. 				  				    </div>
  441. 				  					<div class="words">
  442. 									在这里写上你想说的话.........
  443. 				  					</div>
  444. 				  				</div>
  445. 				  			</div>
  446. 				  		</div>
  447. 				</div>
  448. 			    <!----------选项卡 13---------->
  449. 			    <div class="panel panel-default">
  450. 				  		<div class="panel-heading" role="tab" id="headingTwelve">
  451. 				  		  <h4 class="panel-title">
  452. 				  			<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwelve" aria-expanded="true" aria-controls="collapseTwelve">
  453. 				  			  <i>&emsp;2022&emsp;年&emsp;5&emsp;月&emsp;18&emsp;日</i><span style="margin-left: 800px;">&emsp;</span>
  454. 				  			</span>
  455. 				  		  </h4>
  456. 				  		</div>
  457. 				  		<div id="collapseTwelve" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwelve">
  458. 				  			<div class="panel-body">
  459. 				  				<div class="row">
  460. 				  					<div class="col-xs-6 col-md-3">
  461. 										<p class="thumbnail">
  462. 				  							<img src="../static/1.images/our_journey/照片20.jpg">
  463. 										</p>
  464. 				  				    </div>
  465. 				  					<div class="words">
  466.                                     在这里写上你想说的话.........
  467. 				  					</div>
  468. 				  				</div>
  469. 				  			</div>
  470. 				  		</div>
  471. 				</div>
  472. 			</div>
  473. 	   </form>
  474. 	</body>
  475. </html>

4. 第三个选项卡是“我说”(loving_heart)，这里加入了配乐效果...  

附上代码：

  1. <!DOCTYPE HTML>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. 	<title>Loving_heart</title>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. 	<style type="text/css">
  7. 	 @font-face {
  8. 		font-family: digit;
  9. 		src: url('digital-7_mono.ttf') format("truetype");
  10. 	 }
  11. 	</style >
  12. <meta name="keywords" content="" />
  13. <meta name="description" content="" />	<link href="../static/loving_heart_css/default.css" type="text/css" rel="stylesheet">
  14. 	<script type="text/javascript" src="../static/loving_heart_js/jquery.js"></script>
  15. 	<script type="text/javascript" src="../static/loving_heart_js/garden.js"></script>
  16.     <script type="text/javascript" src="../static/loving_heart_js/functions.js"></script>
  17. 	<script type="text/javascript" src="../static/loving_heart_js/jq.snow.js"></script>
  18. </head> 
  19. <!------------------------插入背景------------------------>
  20. <style type="text/css">
  21.                 html,body
  22.                 {
  23.                     height: 100%;
  24.                     color: #00FF00;
  25.                 }
  26.                 body
  27.                 {
  28.                     //background: url(https://s1.ax1x.com/2020/07/30/ansR4x.jpg)center center;
  29.                     background: #E9C2A6;
  30.                     //background: #696969
  31.                     background-size: cover;
  32.                 }
  33.         </style>
  34. <body>
  35.     <form action="/3" method="post"> </form>
  36.     <!--下面是调用方法和参数说明-->
  37.     <audio autoplay="autoplay" loop="loop" preload="auto"
  38. 		src="../static/2.music/The_Way_I_Still_Love_You.mp3"></audio>
  39. 	<script>
  40. 	$(function(){
  41. 		$.fn.snow({ 
  42. 			minSize: 5,		//雪花的最小尺寸
  43. 			maxSize: 50, 	//雪花的最大尺寸
  44. 			newOn:   150	//雪花出现的频率 这个数值越小雪花越多
  45. 		});
  46. 	});
  47. 	</script>
  48. 	<div id="mainDiv">
  49. 		<div id="content">
  50. 			<div id="code">
  51. 				<span class="comments"><font size = '2'  >/*</font></span><br/>
  52.                 <span class="space"/><span class="comments" ><font size = '2' color='#ff69b9' >
  53. 				               * Smart girl：今天是2022年6月8日。     </font> </span><br/>
  54. 				<span class="space"/><span class="comments"><font size = '2'  color='#ff69b9' >
  55. 				               * 我写这个网站来庆祝这个特殊的日子。       </font> </span><br/>
  56. 				<span class="space"/><span class="comments"><font size = '2'  color='#ff69b9' >
  57. 				               * 虽然，我不是一个很擅长表达言语的人。     </font> </span><br/>
  58. 				<span class="space"/><span class="comments"><font size = '2'  color='#ff69b9' >
  59. 				               * 但我希望我们能记住我们在一起的每一刻。   </font> </span><br/>
  60. 				<span class="space"/><span class="comments"><font size = '2'>
  61. 				*/</font> </span><br/>
  62.  
  63. 				<font size = '2'>Girl u =</font>
  64. 				<span class="keyword"><font size = '2'>new</font></span>
  65. 				<font size = '2'>Girl(</font>
  66. 				<span class="string"><font size = '2'>"Baby"</font></span>
  67. 				<font size = '2'>);</font>
  68. 				<br/>
  69.  
  70. 				<font size = '2'>Boy i =</font>
  71. 				<span class="keyword"><font size = '2'>new</font></span>
  72. 				<font size = '2'>Boy(</font>
  73. 				<span class="string"><font size = '2'>"Zhang"</font></span>
  74. 				<font size = '2'>);</font>
  75. 				<br/>
  76.  
  77. 				<span class="comments"><font size = '2' color='#ff69b9' >
  78. 					// 今天是6月8日，2016年的今天是高考最后一天，也是我们恋爱的第一天。 </font></span><br />
  79. 				<span class="comments"><font size = '2' color='#ff69b9' >
  80. 					// 我把恋爱日期定在今天，是因为我们因高考相遇。   </font></span><br />
  81. 				<span class="comments"><font size = '2' color='#ff69b9' >
  82. 					// 我把你的美丽记录在日记里，让文字把你的青春铭记。</font></span><br />
  83.                 <span class="comments"><font size = '2' color='#ff69b9' >
  84. 					// 我把你的笑容粘贴在日记里，让图片把你的活泼记忆。</font></span><br />
  85. 				<span class="comments"><font size = '2' color='#ff69b9' >
  86. 					// 我把我的照片夹进日记里，让爱情把你的幸福牢系。  </font></span><br />
  87. 				<span class="comments"><font size = '2' color='#ff69b9' >
  88. 					// 对我来说是个重要的时刻，我发现我已经深深爱上了你！</font></span><br />
  89.                 <span class="comments"><font size = '2' color='#ff69b9' >
  90. 					// 当我凝视你的眼，当我听到你的声音。             </font> </span><br />
  91. 				<span class="comments"><font size = '2' color='#ff69b9' >
  92. 					// 当我闻到你秀发上淡淡的清香。                  </font></span><br />
  93.  
  94.                 <span class="comments"><font size = '2' color='#ff69b9' >//  </font></span><br />
  95.  
  96. 				我爱你;<br />
  97. 				<span class="comments"><font size = '2' color='#ff69b9' >
  98. 					// 当我感受到我剧烈的心跳，我明白了：</font></span><br />
  99. 				我想你;<br />
  100. 				<span class="comments"><font size = '2' color='#ff69b9' >
  101. 					// 你在我心中最美。 </font></span><br />
  102. 				我想照顾你 <br />
  103. 				<span class="comments"><font size = '2' color='#ff69b9' >
  104. 					// 你是我今生的唯一！</font></span><br />
  105. 				<span class="comments"><font size = '2' color='#ff69b9' >
  106. 					// 所以我继续等待，我有信心，你会。</font></span><br />
  107. 				<span class="keyword">我会</span> 永远  <span class="keyword">爱你</span>;<br />
  108. 				<span class="keyword">一直</span> 爱你 <br />
  109. 				<span class="placeholder"/>我有一颗永远不变的心<br />
  110. 				<span class="placeholder"/><span class="comments"><font size = '2' color='#ff69b9' >
  111. 				    // 我认为这是一个重要的决定。</font></span><br />
  112. 				<span class="placeholder"/><span class="comments"><font size = '2' color='#ff69b9' >
  113. 				    // 你可以在任何时候决定。   </font></span><br />
  114. 				<span class="placeholder"/>爱你 = 想你<br /><br />
  115. 				我非常高兴能认识你<br />
  116. 			</div>
  117. 			<div id="loveHeart">
  118. 				<canvas id="garden"></canvas>
  119. 				<div id="words">
  120. 					<div id="messages">
  121. 						        Smart girl, we've fallen in love:
  122. 						<div id="elapseClock"></div>
  123. 					</div>
  124. 					<div id="loveu">
  125. 						<div class="signature">--Zhang</div>
  126. 					</div>
  127. 				</div>
  128.  
  129.  
  130. 				     </div>
  131. 				</div>
  132. 			</div>
  133. </div>
  134. 	<div class="bg1">	
  135. 		<div class="main">
  136. 			<footer style="line-height:20px">
  137.                 <div id="copyright">
  138.                      <a href='' target="_blank"></a> 
  139.                      <a href="" target="_blank"></a>
  140.                      <a href="" target="_blank"></a>
  141.                 </object>
  142.                 </div>
  143. 		</div>
  144. 	</div>
  145. </div>
  146.  
  147. 	<script type="text/javascript">
  148. 		var offsetX = $("#loveHeart").width() / 2;
  149. 		var offsetY = $("#loveHeart").height() / 2 - 55;
  150. 		var together = new Date();
  151. 		together.setFullYear(2016, 6, 8);
  152. 		together.setHours(00);
  153. 		together.setMinutes(0);
  154. 		together.setSeconds(0);
  155. 		together.setMilliseconds(0);
  156. 		
  157. 		if (!document.createElement('canvas').getContext) {
  158. 			var msg = document.createElement("div");
  159. 			msg.id = "errorMsg";
  160. 			msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
  161. 			document.body.appendChild(msg);
  162. 			$("#code").css("display", "none")
  163. 			$("#copyright").css("position", "absolute");
  164. 			$("#copyright").css("bottom", "10px");
  165. 		    document.execCommand("stop");
  166. 		} else {
  167. 			setTimeout(function () {
  168. 				startHeartAnimation();
  169. 			}, 5000);
  170.  
  171. 			timeElapse(together);
  172. 			setInterval(function () {
  173. 				timeElapse(together);
  174. 			}, 500);
  175.  
  176. 			adjustCodePosition();
  177. 			$("#code").typewriter();
  178. 		}
  179. 	</script>
  180. 	<embed src="../music/The_Way_I_Still_Love_You.mp3" autostart="true" loop="true" hidden="true"></embed>
  181. </body>
  182. </html>

4. 第四个选项卡是“浪漫烟花”(fireworks)，代码如下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Surprise</title>
  6.  
  7. <style>
  8. html,body{
  9. 	margin:0px;
  10. 	width:100%;
  11. 	height:100%;
  12. 	overflow:hidden;
  13. 	background:#000;
  14. }
  15. </style>
  16.  
  17. </head>
  18. <body>
  19. <form action="/4" method="post"> </form>
  20. <audio autoplay="autoplay" loop="loop" preload="auto"
  21.  
  22.             	src="../static/2.music/所念皆星河.mp3"></audio>
  23. <canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas>
  24. <canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas" ></canvas>
  25. <div class="overlay">
  26.   <div class="tabs">
  27.     <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>
  28.  
  29.     <div class="tabs-panels">
  30.       <ul class="tabs-panel commands">
  31.       </ul>
  32.     </div>
  33.   </div>
  34. </div>
  35. <script>
  36. function initVars(){
  37.  
  38. 	pi=Math.PI;
  39. 	ctx=canvas.getContext("2d");
  40. 	canvas.width=canvas.clientWidth;
  41. 	canvas.height=canvas.clientHeight;
  42. 	cx=canvas.width/2;
  43. 	cy=canvas.height/2;
  44. 	playerZ=-25;
  45. 	playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
  46. 	scale=600;
  47. 	seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
  48. 	seeds=new Array();
  49. 	sparkPics=new Array();
  50. 	s="https://cantelope.org/NYE/";
  51. 	for(i=1;i<=10;++i){
  52. 		sparkPic=new Image();
  53. 		sparkPic.src=s+"spark"+i+".png";
  54. 		sparkPics.push(sparkPic);
  55. 	}
  56. 	sparks=new Array();
  57. 	pow1=new Audio(s+"pow1.ogg");
  58. 	pow2=new Audio(s+"pow2.ogg");
  59. 	pow3=new Audio(s+"pow3.ogg");
  60. 	pow4=new Audio(s+"pow4.ogg");
  61. 	frames = 0;
  62. }
  63.  
  64. function rasterizePoint(x,y,z){
  65.  
  66. 	var p,d;
  67. 	x-=playerX;
  68. 	y-=playerY;
  69. 	z-=playerZ;
  70. 	p=Math.atan2(x,z);
  71. 	d=Math.sqrt(x*x+z*z);
  72. 	x=Math.sin(p-yaw)*d;
  73. 	z=Math.cos(p-yaw)*d;
  74. 	p=Math.atan2(y,z);
  75. 	d=Math.sqrt(y*y+z*z);
  76. 	y=Math.sin(p-pitch)*d;
  77. 	z=Math.cos(p-pitch)*d;
  78. 	var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
  79. 	if(!uc) return {x:0,y:0,d:-1};
  80. 	var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
  81. 	var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
  82. 	if(!z)z=.000000001;
  83. 	if(ua>0&&ua<1&&ub>0&&ub<1){
  84. 		return {
  85. 			x:cx+(rx1+ua*(rx2-rx1))*scale,
  86. 			y:cy+y/z*scale,
  87. 			d:Math.sqrt(x*x+y*y+z*z)
  88. 		};
  89. 	}else{
  90. 		return {
  91. 			x:cx+(rx1+ua*(rx2-rx1))*scale,
  92. 			y:cy+y/z*scale,
  93. 			d:-1
  94. 		};
  95. 	}
  96. }
  97.  
  98. function spawnSeed(){
  99.  
  100. 	seed=new Object();
  101. 	seed.x=-50+Math.random()*100;
  102. 	seed.y=25;
  103. 	seed.z=-50+Math.random()*100;
  104. 	seed.vx=.1-Math.random()*.2;
  105. 	seed.vy=-1.5;//*(1+Math.random()/2);
  106. 	seed.vz=.1-Math.random()*.2;
  107. 	seed.born=frames;
  108. 	seeds.push(seed);
  109. }
  110.  
  111. function splode(x,y,z){
  112.  
  113. 	t=5+parseInt(Math.random()*150);
  114. 	sparkV=1+Math.random()*2.5;
  115. 	type=parseInt(Math.random()*3);
  116. 	switch(type){
  117. 		case 0:
  118. 			pic1=parseInt(Math.random()*10);
  119. 			break;
  120. 		case 1:
  121. 			pic1=parseInt(Math.random()*10);
  122. 			do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
  123. 			break;
  124. 		case 2:
  125. 			pic1=parseInt(Math.random()*10);
  126. 			do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
  127. 			do{ pic3=parseInt(Math.random()*10); }while(pic3==pic1 || pic3==pic2);
  128. 			break;
  129. 	}
  130. 	for(m=1;m<t;++m){
  131. 		spark=new Object();
  132. 		spark.x=x; spark.y=y; spark.z=z;
  133. 		p1=pi*2*Math.random();
  134. 		p2=pi*Math.random();
  135. 		v=sparkV*(1+Math.random()/6)
  136. 		spark.vx=Math.sin(p1)*Math.sin(p2)*v;
  137. 		spark.vz=Math.cos(p1)*Math.sin(p2)*v;
  138. 		spark.vy=Math.cos(p2)*v;
  139. 		switch(type){
  140. 			case 0: spark.img=sparkPics[pic1]; break;
  141. 			case 1:
  142. 				spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2];
  143. 				break;
  144. 			case 2:
  145. 				switch(parseInt(Math.random()*3)){
  146. 					case 0: spark.img=sparkPics[pic1]; break;
  147. 					case 1: spark.img=sparkPics[pic2]; break;
  148. 					case 2: spark.img=sparkPics[pic3]; break;
  149. 				}
  150. 				break;
  151. 		}
  152. 		spark.radius=25+Math.random()*50;
  153. 		spark.alpha=1;
  154. 		spark.trail=new Array();
  155. 		sparks.push(spark);
  156. 	}
  157. 	switch(parseInt(Math.random()*4)){
  158. 		case 0:	pow=new Audio(s+"pow1.ogg"); break;
  159. 		case 1:	pow=new Audio(s+"pow2.ogg"); break;
  160. 		case 2:	pow=new Audio(s+"pow3.ogg"); break;
  161. 		case 3:	pow=new Audio(s+"pow4.ogg"); break;
  162. 	}
  163. 	d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));
  164. 	pow.volume=1.5/(1+d/10);
  165. 	pow.play();
  166. }
  167.  
  168. function doLogic(){
  169.  
  170. 	if(seedTimer<frames){
  171. 		seedTimer=frames+seedInterval*Math.random()*10;
  172. 		spawnSeed();
  173. 	}
  174. 	for(i=0;i<seeds.length;++i){
  175. 		seeds[i].vy+=gravity;
  176. 		seeds[i].x+=seeds[i].vx;
  177. 		seeds[i].y+=seeds[i].vy;
  178. 		seeds[i].z+=seeds[i].vz;
  179. 		if(frames-seeds[i].born>seedLife){
  180. 			splode(seeds[i].x,seeds[i].y,seeds[i].z);
  181. 			seeds.splice(i,1);
  182. 		}
  183. 	}
  184. 	for(i=0;i<sparks.length;++i){
  185. 		if(sparks[i].alpha>0 && sparks[i].radius>5){
  186. 			sparks[i].alpha-=.01;
  187. 			sparks[i].radius/=1.02;
  188. 			sparks[i].vy+=gravity;
  189. 			point=new Object();
  190. 			point.x=sparks[i].x;
  191. 			point.y=sparks[i].y;
  192. 			point.z=sparks[i].z;
  193. 			if(sparks[i].trail.length){
  194. 				x=sparks[i].trail[sparks[i].trail.length-1].x;
  195. 				y=sparks[i].trail[sparks[i].trail.length-1].y;
  196. 				z=sparks[i].trail[sparks[i].trail.length-1].z;
  197. 				d=((point.x-x)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z));
  198. 				if(d>9){
  199. 					sparks[i].trail.push(point);
  200. 				}
  201. 			}else{
  202. 				sparks[i].trail.push(point);
  203. 			}
  204. 			if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1);
  205. 			sparks[i].x+=sparks[i].vx;
  206. 			sparks[i].y+=sparks[i].vy;
  207. 			sparks[i].z+=sparks[i].vz;
  208. 			sparks[i].vx/=1.075;
  209. 			sparks[i].vy/=1.075;
  210. 			sparks[i].vz/=1.075;
  211. 		}else{
  212. 			sparks.splice(i,1);
  213. 		}
  214. 	}
  215. 	p=Math.atan2(playerX,playerZ);
  216. 	d=Math.sqrt(playerX*playerX+playerZ*playerZ);
  217. 	d+=Math.sin(frames/80)/1.25;
  218. 	t=Math.sin(frames/200)/40;
  219. 	playerX=Math.sin(p+t)*d;
  220. 	playerZ=Math.cos(p+t)*d;
  221. 	yaw=pi+p+t;
  222. }
  223.  
  224. function rgb(col){
  225.  
  226. 	var r = parseInt((.5+Math.sin(col)*.5)*16);
  227. 	var g = parseInt((.5+Math.cos(col)*.5)*16);
  228. 	var b = parseInt((.5-Math.sin(col)*.5)*16);
  229. 	return "#"+r.toString(16)+g.toString(16)+b.toString(16);
  230. }
  231.  
  232. function draw(){
  233.  
  234. 	ctx.clearRect(0,0,cx*2,cy*2);
  235.  
  236. 	ctx.fillStyle="#ff8";
  237. 	for(i=-100;i<100;i+=3){
  238. 		for(j=-100;j<100;j+=4){
  239. 			x=i;z=j;y=25;
  240. 			point=rasterizePoint(x,y,z);
  241. 			if(point.d!=-1){
  242. 				size=250/(1+point.d);
  243. 				d = Math.sqrt(x * x + z * z);
  244. 				a = 0.75 - Math.pow(d / 100, 6) * 0.75;
  245. 				if(a>0){
  246. 					ctx.globalAlpha = a;
  247. 					ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
  248. 				}
  249. 			}
  250. 		}
  251. 	}
  252. 	ctx.globalAlpha=1;
  253. 	for(i=0;i<seeds.length;++i){
  254. 		point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z);
  255. 		if(point.d!=-1){
  256. 			size=200/(1+point.d);
  257. 			ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
  258. 		}
  259. 	}
  260. 	point1=new Object();
  261. 	for(i=0;i<sparks.length;++i){
  262. 		point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z);
  263. 		if(point.d!=-1){
  264. 			size=sparks[i].radius*200/(1+point.d);
  265. 			if(sparks[i].alpha<0)sparks[i].alpha=0;
  266. 			if(sparks[i].trail.length){
  267. 				point1.x=point.x;
  268. 				point1.y=point.y;
  269. 				switch(sparks[i].img){
  270. 					case sparkPics[0]:ctx.strokeStyle="#f84";break;
  271. 					case sparkPics[1]:ctx.strokeStyle="#84f";break;
  272. 					case sparkPics[2]:ctx.strokeStyle="#8ff";break;
  273. 					case sparkPics[3]:ctx.strokeStyle="#fff";break;
  274. 					case sparkPics[4]:ctx.strokeStyle="#4f8";break;
  275. 					case sparkPics[5]:ctx.strokeStyle="#f44";break;
  276. 					case sparkPics[6]:ctx.strokeStyle="#f84";break;
  277. 					case sparkPics[7]:ctx.strokeStyle="#84f";break;
  278. 					case sparkPics[8]:ctx.strokeStyle="#fff";break;
  279. 					case sparkPics[9]:ctx.strokeStyle="#44f";break;
  280. 				}
  281. 				for(j=sparks[i].trail.length-1;j>=0;--j){
  282. 					point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z);
  283. 					if(point2.d!=-1){
  284. 						ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2;
  285. 						ctx.beginPath();
  286. 						ctx.moveTo(point1.x,point1.y);
  287. 						ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d);
  288. 						ctx.lineTo(point2.x,point2.y);
  289. 						ctx.stroke();
  290. 						point1.x=point2.x;
  291. 						point1.y=point2.y;
  292. 					}
  293. 				}
  294. 			}
  295. 			ctx.globalAlpha=sparks[i].alpha;
  296. 			ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size);
  297. 		}
  298. 	}
  299. }
  300.  
  301. function frame(){
  302.  
  303. 	if(frames>100000){
  304. 		seedTimer=0;
  305. 		frames=0;
  306. 	}
  307. 	frames++;
  308. 	draw();
  309. 	doLogic();
  310. 	requestAnimationFrame(frame);
  311. }
  312.  
  313. window.addEventListener("resize",()=>{
  314. 	canvas.width=canvas.clientWidth;
  315. 	canvas.height=canvas.clientHeight;
  316. 	cx=canvas.width/2;
  317. 	cy=canvas.height/2;
  318. });
  319.  
  320. initVars();
  321. frame();
  322. </script>
  323. <script src="js/index.js"></script>
  324.  
  325. </body>
  326. </html>

4. 第五个选项卡是“制作过程”(working_process)，效果如下图，我做了近一个月，我把每天制作的过程用EV录屏，录了下来（每天就录五分钟左右），然后做完之后，把这些视频用剪辑视频的软件整合剪辑一下，并且加速，插入到网页里面，这样就能在线看到制作过程啦~

此模块代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>制作过程</title>
  6.     <link rel="icon" href="../static/1.images/login_main_page/爱心.png" type="image/x-icon"/>
  7.     <link href="../static/login_main_page_css/bootstrap.min.css" rel="stylesheet">
  8.     <script src="../static/login_main_page_js/jquery-3.3.1.min.js"></script>
  9.     <script src="../static/login_main_page_js/bootstrap.min.js"></script>
  10.     <script src="../static/login_main_page_js/shubiaoaixin.js"></script>
  11.     <link  href="../static/login_main_page_css/header.css" rel="stylesheet">
  12.     <!------------------------照片背景------------------------>
  13.     <style type="text/css">
  14.                     html,body
  15.                     {
  16.                         height: 100%;
  17.                         color: #00FF00;
  18.                     }
  19.                     body
  20.                     {
  21.                          background-size: cover;
  22.                          background-image:url("/static/1.images/working_process/复古照相机.jpg")
  23.                     }
  24.                     video
  25.                     {
  26.                         height: 60%;
  27.                         margin-left:220px;
  28. 			            margin-top: 50px;
  29.                     }
  30.     </style>
  31.     <style type="text/css">
  32.                     .header_right
  33.                     {
  34.                         margin-left:1px;
  35.                         margin-top: 1px;
  36.                     }
  37.     </style>
  38.     <style type="text/css">
  39. 				button
  40. 				{
  41. 				    width:300px;
  42.                     height:50px;
  43.                     font-size:19px;
  44.                     line_height:36px;
  45.                     border:1px solid transparent;
  46.                     color:#8b4513;                   /* 按钮文字颜色*/
  47.                     background-color:transparent;    /* 按钮背景颜色*/
  48.                     //background-color:pink;
  49.                     border-color: none;              /* 按钮边框颜色*/
  50. 				}
  51.     </style>
  52. </head>
  53.     <body>
  54.            <form action="/5" method="post"> </form>
  55.            <!--1.四个选项卡 首页、照片墙、历程、我说  -->
  56. 		   <div class="header">
  57. 				    <!--0.Happy sixth anniversary-->
  58. 					<div class="logo">
  59. 					<form action="/1" method="post">
  60. 						<button style="font-size:24px;">
  61. 							<font color = white >
  62. 								<i><b>Happy sixth anniversary</b></i>
  63. 							</font>
  64. 						</button>
  65. 					</form>
  66. 					</div>
  67. 				    <!--1.首页-->
  68. 				    <div class="logo">
  69. 				    <form action="/1" method="post">
  70. 						<button style="width:150px;">
  71. 							<font color = white >
  72. 								首页
  73. 							</font>
  74. 						</button>
  75. 					</form>
  76. 					</div>
  77. 				    <!--2.照片墙-->
  78. 				    <div class="logo">
  79. 				    <form action="/2" method="post">
  80. 						<button style="width:140px;">
  81.                                 <a href="https://aimeike.tv/video/RZLLH" style="color: white;">照片墙</a>
  82. 						</button>
  83. 					</form>
  84. 					</div>
  85. 				    <!--3.历程-->
  86. 				    <div class="logo">
  87. 				    <form action="/3" method="post">
  88. 						<button style="width:140px;">
  89. 								<font color = white >
  90. 								历程
  91. 								</font>
  92. 						</button>
  93. 					</form>
  94. 					</div>
  95. 				    <!--4.我说-->
  96. 				    <div class="logo">
  97. 				    <form action="/4" method="post">
  98. 						<button style="width:140px;">
  99. 							<font  color = white >
  100. 								我说
  101. 							</font>
  102. 						</button>
  103. 					</form>
  104. 					</div>
  105. 				    <!--5.浪漫烟花-->
  106. 				    <div class="logo">
  107. 				    <form action="/5" method="post">
  108. 						<button style="width:150px;">
  109. 							 <font  color = white >
  110. 								浪漫烟花
  111. 							 </font>
  112. 						</button>
  113. 					</form>
  114. 					</div>
  115. 				    <!--6.制作过程-->
  116. 				    <div class="logo">
  117. 				    <form action="/6" method="post">
  118. 						<button style="width:160px;">
  119. 							<font  color = white>
  120.                               <b>
  121. 								制作过程
  122.                               </b>
  123. 							</font>
  124. 						</button>
  125. 					</form>
  126. 					</div>
  127. 			</div>
  128.                 <video  controls="controls">
  129.                 <source src = "../static/3.video/六周年礼物制作过程_EV.mp4">
  130.                 </source>
  131.             </video>
  132.     </body>
  133. </html>
  134.

这就是整个前后端的代码，整个工程能够完整的在我电脑上运行起来了，但是下一个问题是如何把自己制作的网页发布到互联网上，别人直接输入网址就能查看呢？

三、我了解到，把自己制作的网页发布到互联网上，第一步需要确定自己的网页是动态网页还是静态网页，我请教了一些同学，说我的做的这个网页应该是动态网页，虽然没有数据库，但是因为涉及到了用户的账号和密码输入，如果伙伴们做的是静态网页，Github上应该就能发布，操作应该很简单。第二步，需要域名和服务器，这一部分我也是做了大量的工作，看了各种博客和论坛，域名和服务器都是要买的，.com的域名较贵.top的域名相对来说比较便宜。我做了，腾讯云，阿里云，还有三丰云等各种平台账号的注册并且尝试，最后都失败了，我不了解，好像这个方案Flask做后端，网上的教程很少，最后实在没办法了，我去淘宝找了一个专业做网页的店铺，向他说明了我的情况。

我问他，我的前后端都已经配置好了，都已经调试没问题了，我想达到在别人的电脑上输入网址就能访问我网页的效果，他说可以做，全部需要50元钱，包括域名，我滴天，这也太便宜了，我直接好家伙，果然是考技术吃饭的，对于专业的来说，可能连十分钟都用不上吧，我又抱着想学明白的态度问了他，我说能不能在你做的时候给我录一个视频，教教我怎么做，他说可以需要多加20元钱，我觉得很值，但是结果他只教了我，怎么把本地文件通过FlashFXP软件传输到FTP服务器上......wo emm 了....

由于不是这个专业的，我没有深入研究，各位伙伴如果有自己的制作心得和解决问题的方案，欢迎留言，欢迎指正~

最后，我把整个工程上传到了我的博客上，需要下载，赚点积分o(╥﹏╥)o~

参考博客：

1. 

2.

3.

4.

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发