snowinmay.net学习运用

网站结构图：

起初只是单纯想给网站加一个欢迎页面。当初的想法就是设计的简单一点，一个导航。

所以就有了第一版的页面：

日期：4月初

链接：http://snowinmay.net/index-419.html 

简介：

1. 用了响应式的设计，主要是区分手机端横屏和竖屏的不同显示：@media screen and (max-400px)。
2. 用js处理一些简单的交互：图片定时轮播，鼠标点击切换图片。

不足：为能对所有浏览器兼容，在ie7-8下图片不显示圆角，ie6下不显示图片。

第二版：

日期：4.19

链接：http://snowinmay.net/index-510.html

简介：

1. 对ie6-8运用了图片背景来实现圆角功能。（也用过网上其他方法，感觉效果不好）
2. 对ie6运用css hack 来解决不现实图片问题。

第三版：

日期：5.10

链接：http://snowinmay.net/index-527.html

思路：想加一些内容，在左边放一个悬浮的导航，鼠标放上显示内容，点击弹出具体内容。

简介：

1. 右下方加了一个版权和版本号
2. 右边悬浮一个百度分享按钮，左边放一个关于我的按钮。
3. 弹出内容后面有个透明的层。（思路来自一些网站的新手指导页面，对视窗定位fixed）
4. 给列表背景加上了一个随即的颜色。（用js Math.random()来实现）
5. 很多页面中用瀑布流的实现方式（分列来现实，最好的是通过js或者后台来判断高度智能的来选择放置。）
6. 用了audio标签来引入音频文件。
7. 给弹窗设置了最小宽度，来防止内容重叠。
8. 为了让内容完整现实，所有框都用了overflow:scroll;因为有一个关闭按钮放在框外面，所以在框外面又放了一个框用来给关闭按钮定位。

不足：

1. 因为弹窗设置了固定的宽度，所以在移动端显示的时候效果不好。
2. 简介中的一些特性在ie678中未必兼容或者完全兼容。体验不是很好。

改进的方法：

1. 已经对宽带进行了相应的设计，当宽度小于正常浏览模式的时候就隐藏了两个悬浮按钮，这样在手机端就看不到按钮了，不影响用户体验。
2. 是否要针对ie678也做一下判断呢？

第四板：http://snowinmay.net/index-708.php

思路：因为网页都是静态的，数据内容都直接放在页面中，考虑用php或者node.js来做一个后台，让数据都进数据库。因为网站本来用的就是wp的模版，用php写的，所以我选择了php。

现在的版本：http://snowinmay.net/

之前用过一些php，但是都是直接写php代码到网页中，这样就感觉w3c中的结构，样式和行为混在了一起。所以把所有代码用smarty来写。用include包含进来，显得比较清晰。