小伙伴们，我们学习过了zepto的相关知识，接下来让我们使用zepto来实现手机相册效果吧。

一、语言和环境

1、实现语言

      HTML、CSS、JavaScript、jQuery、zepto

2、 环境要求及开发工具

      建议 Sublime text

二、网页整体要求：

1、 要求页面整洁、美观，与提供的页面效果图、结构保持一致

2、 要求HTML代码、CSS代码、jQuery代码书写、命名符合规范，在代码中添加必要的注释。

3、 网页文件夹管理，图片、样式、脚本等资料独立文件夹

三、具体要求：

1、 该作业为模仿手机相册功能，要求整体的背景颜色为黑色

2、 在任意移动端设备下均是一行四列显示

3、 每张图片均要有边框，圆角

4、 图片与边框之间有距离（可设置内边距）

5、 每个图片单元之间有距离（可设置外边距）

6、 图片要在脚本中插入

7、 小图状态下单击图片时，显示对应的大图；在显示大图状态时，再次单击，返回相册（即小图状态）

8、 计算图片的宽高比，判断是横图还是竖图，高度与宽度比大于1.2时，设置图片的高度为窗口的高度，这种情况为竖图显示；高度与宽度比小于1.2时，设置图片的宽度为窗口的宽度，高度自适应（可以不用设置），这种情况为横图显示；

9、 在大图显示为横图时，要设置垂直位置为居中

10、具体效果可参考效果图

规范【10分】

    *网页文件夹管理，图片、样式表、脚本等资料独立文件夹。

    *文件、id、class命名规范。

     *HTML、CSS、脚本代码规范及添加适量注释。

网页整体【10分】

    * 要求页面整洁、美观，与提供的页面结构保持一致，

整体样式【80分】

    *在任意移动端设备下均是一行四列显示；

    * 图片要在脚本中插入

    * 小图状态下单击图片时，显示对应的大图；

    * 在显示大图状态时，再次单击，返回相册；

    * 计算图片的宽高比，判断是横图还是竖图；

    * 在大图显示为横图时，要设置垂直位置为居中；