抹桥的博客

前言

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

众所周知，onedrive 是微软提供的一款个人网络硬盘，对老用户提供 25GB 的免费空间，新注册用户提供 7GB 的空间，要是这个空间可以用来做博客的图床就太好不过了。毕竟微软这么一个财大气粗的公司，而且在国内也不会随随便便就被墙掉，所以稳定性有保证。但是 onedrive 提供的公开链接并不能直接插入博客，需要做一定的格式转换才可以。在网上找到了转换连接的办法，但是要是手动转换，太麻烦了，于是想着做一个 chrome 扩展，毕竟方便嘛。

花了两天时间，总算把博客搭起来了。期间碰到了很多问题，还好有伟大的 Google，也都一一化解。现将其间过程写下来，也好帮助像我一样需要帮助的人。

幽灵按钮最近很流行，就寻思着做了一个，它有如下一些效果。

固定导航栏根据页面滚动条距离来自动定位的效果，其中心思想就是通过判定当前滚动条的值与页面中相应内容值大小的关系来选择。js 代码如下（用到了 jQuery 库）：

把慕课的首页临摹了一下，感觉还不错。

前几天把之前做的购物网页的 js 效果写了出来。

刚刚花了点时间学完 html 和 css，同时粗略的看了一点 javascript。于是看了一遍教程后，就动手做了下面这个页面。（这是原效果图）