今天终于把拖了快一周的纪念页做出来了, 抱歉抱歉抱歉抱歉抱歉抱歉让大家久等了(我感觉同学们都忘了这回事…)。

本文主要是总结这个网页的开发过程,整体来说不算复杂,毕竟有了之前开发几个大项目(网站)的经历,做起来也是顺风顺水,没有遇到困难~

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>
px: 像素单位

这是一个很简单的父子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攻击了,这个页面正常情况下不会达到这么高的并发,所以就放心用了。