今天终于把拖了快一周的纪念页做出来了， 抱歉抱歉抱歉抱歉抱歉抱歉让大家久等了（我感觉同学们都忘了这回事…）。
本文主要是总结这个网页的开发过程，整体来说不算复杂，毕竟有了之前开发几个大项目(网站)的经历，做起来也是顺风顺水，没有遇到困难~
PS：对我之前开发的几个大项目感兴趣可以去博客的“关于我”页面康康~
提示：如果你是在小程序里看这篇文章，下面的代码布局可能会乱，可以复制链接在浏览器中打开或者在我的公众号中阅读本文。
主页面布局
顶部图片/文字
按顺序开发，首先做出来背景图和顶部的图片。不多说 直接放代码：
/* 背景图 */
body {
background-image: url('./images/bg.png');
background-repeat:no-repeat;
background-size: 100% 100%;
}
/* 顶部图和文字显示 */
.top-img {
position: relative;
}
.top-img img {
width: 100%;
}
.top-img .text {
position: absolute;
right: 20px;
top: 65px;
font-size: 35px;
color: white;
font-weight: 500;
height: 80px;
width: 160px;
line-height: 34px;
}
.top-img .one-line {
padding-top: 10px;
}顶部图文字的定位使用到了CSS的绝对定位，也就是“relative”和“absolute”两种定位模式，接下来我简单介绍一下。
<div class="parent">
<div class="child">
test
</div>
</div>
这是一个很简单的父子DIV模型，child在parent内部，假设parent是固定宽高的盒子，如果我们需要child盒子显示在parent盒子的某个位置上（覆盖在上面），就需要使用相对定位（position:absolute）。
首先给parent盒子加上“position:relative”，表示内部元素是相对于parent定位，然后给child盒子加上“position:absolute”即可。
至此，我们就可以在child上加入top/left/right/bottom来相对于parent进行定位。比如，我们要定位在parent右上，可以直接加入“right:0;top:0;”。
*请使用绝对单位(不能使用百分号 因为无法获取到父元素宽高)
3D画廊
主页上的3D画廊是使用了HTML的iframe组件（引入另一个网页），这样方便维护，一大坨几乎永远不改的代码都堆在主页源码里太难看了…另外，这样做也方便引用。画廊监听整个网页的点击事件，会影响到点击其他按钮和滚动页面。
这个页面使用了HTML5的Canvas组件和一些开源项目。具体的原理我也不太清楚，还在学习中。
以后再来补充吧——
3D画廊上覆盖的提示文字
利用了上面介绍的CSS绝对定位，提示定位在iframe上，宽高与iframe相同，背景色半透明。点击[我知道了]后元素消失，即可对iframe操作。
<div class="pic_view">
<iframe id="vw_page" runat="server" src="3d.php" width="100%" height="200" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
<div class="tip">提示:左右滑动来查看3D画廊~ <a href="javascript:$('.tip').hide(500)">[我知道了]</a></div>
</div>按钮
HTML原生的按钮太丑了，在网上找到了一种既扁平又有 Material Design风格(点击后有水波纹) 的按钮。纯CSS无法实现点击波纹，还需要JS。
/* 部分CSS */
.btn {
border: none;
color: white;
overflow: hidden;
margin: 1rem;
padding: 0;
text-transform: uppercase;
width: 150px;
height: 40px;
cursor:pointer;
}
.btn.color-1 {
background-color: #426fc5;
}
.btn-border.color-1 {
background-color: transparent;
border: 2px solid #426fc5;
color: #426fc5;
}……此处待补充子页面设计过程……
留言功能
懒得重新写一份留言板，这样涉及到数据库、建表、前后端做接口、再写一套评论区UI 还要支持回复、嵌套，最重要的是要支持微信登陆（非企业开发者，无法实现）。
所以就用了我这个博客的小程序，新建一篇文章，把评论区当成专用留言板。这样既支持了微信登陆、又方便维护，一举两得，成本极低。
页面浏览量等动态信息显示
这里我取巧了，没用数据库，开发起来非常快，几行代码就完事。
<?php
require 'data.php';//[a]
$click++;//[b]
file_put_contents('data.php','<?php $click='.$click.';');//[c]把“$click”变量单独写在一个PHP文件里(data.php)，主文件引入他[a]，读出变量值+1[b]，再写回到文件里[c]。
这样做有个小问题，当网站并发偏高的情况下（20次+/秒）有一定几率读不到文件内容 然后变量会归零覆盖源文件（血的教训啊…）。不过上次那件事是因为页面被CC攻击了，这个页面正常情况下不会达到这么高的并发，所以就放心用了。
Comments | NOTHING