网站结构图：
起初只是单纯想给网站加一个欢迎页面。当初的想法就是设计的简单一点，一个导航。
所以就有了第一版的页面：
日期：4月初
链接：http://snowinmay.net/index-419.html
简介：
- 用了响应式的设计，主要是区分手机端横屏和竖屏的不同显示：@media screen and (max-width:400px)。
- 用js处理一些简单的交互：图片定时轮播，鼠标点击切换图片。
不足：为能对所有浏览器兼容，在ie7-8下图片不显示圆角，ie6下不显示图片。
第二版：
日期：4.19
链接：http://snowinmay.net/index-510.html
简介：
- 对ie6-8运用了图片背景来实现圆角功能。（也用过网上其他方法，感觉效果不好）
- 对ie6运用css hack 来解决不现实图片问题。
第三版：
日期：5.10
链接：http://snowinmay.net/index-527.html
思路：想加一些内容，在左边放一个悬浮的导航，鼠标放上显示内容，点击弹出具体内容。
简介：
- 右下方加了一个版权和版本号
- 右边悬浮一个百度分享按钮，左边放一个关于我的按钮。
- 弹出内容后面有个透明的层。（思路来自一些网站的新手指导页面，对视窗定位fixed）
- 给列表背景加上了一个随即的颜色。（用js Math.random()来实现）
- 很多页面中用瀑布流的实现方式（分列来现实，最好的是通过js或者后台来判断高度智能的来选择放置。）
- 用了audio标签来引入音频文件。
- 给弹窗设置了最小宽度，来防止内容重叠。
- 为了让内容完整现实，所有框都用了overflow:scroll;因为有一个关闭按钮放在框外面，所以在框外面又放了一个框用来给关闭按钮定位。
不足：
- 因为弹窗设置了固定的宽度，所以在移动端显示的时候效果不好。
- 简介中的一些特性在ie678中未必兼容或者完全兼容。体验不是很好。
改进的方法：
- 已经对宽带进行了相应的设计，当宽度小于正常浏览模式的时候就隐藏了两个悬浮按钮，这样在手机端就看不到按钮了，不影响用户体验。
- 是否要针对ie678也做一下判断呢？
第四板：http://snowinmay.net/index-708.php
思路：因为网页都是静态的，数据内容都直接放在页面中，考虑用php或者node.js来做一个后台，让数据都进数据库。因为网站本来用的就是wp的模版，用php写的，所以我选择了php。
现在的版本：http://snowinmay.net/
之前用过一些php，但是都是直接写php代码到网页中，这样就感觉w3c中的结构，样式和行为混在了一起。所以把所有代码用smarty来写。用include包含进来，显得比较清晰。