终于搞定了一个电商整站临摹，共四张页面，实现了基本的交互功能，同时也应用了less这个新学的css预处理语言。之前也做过一个电商首页点这儿。但是因为只是单页面，处理起来比较简单。但是在制作这个整站的过程中，更加深刻的理解一些之前学过的内容：比如样式结构的分离，js设计时的分层思想等。点击这里查看网页效果，或者下面有效果图(图好丑)：

结构

首先说结构，拿到设计图时，先要进行分析。比如这四张页面，是典型的上中下结构，其除了中间正文部分，头部和脚部都是完全一样的，而且除了

粗略的看了一下 chrome 提供的 api，发现如果只是做一个简单的应用其实很简单。那么说干就干，下面是做好的效果图。 我也直接将内容嵌入进来，可以直接在这转换：

它的功能：输入从 onedrive 获取的公开链接和文件的类型，就可以得到这个文件的可直接访问的地址。 它由四个基本文件组成，分别为：

• manifest.json
• popup.html
<

框架选择

一开始打算搭建博客，先要思考你要搭建那种类型的网站：动态网站还是静态网站。 考虑到我只是想有一个可以记录自己想法的空间，所以就选择了静态网站。而静态网站也有很多框架可供选择，github推荐的jekyll，基于 jekyll 开发的octopress，以及使用·node·编写的hexo。

jekyll

Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown（或者 Textile 以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page

其中按钮上的线条和图标的旋转完全用CSS3中的transtion和transform来实现，其中图标的旋转效果实现过程如下：

.link .img{
    display: block;
    width:180px;
    height:180px;
    margin-bottom: 20px;
    -webkit-transition:all 0.5s cubic-bezier(0, .18, 0, .97);　　　　//为了兼容chrome和Safari
    transition:all 0.5s cubic-bezier(0, .18, 0, .97);　　　　　　　　//定义动画属性，包括要变化的属性，时间，以及变化曲线（linear、ease、ease-out或者自定义等）
}