制作静态页面的悬浮框

在写页面之前，我们首先要对所要实现的界面进行相应的分析，理清层次之后再写。

今天我们以小米官网为例，来进行这样悬浮框的实现。

第一步，我们要分析一下。

我们需要实现的功能：

1. 滑动滚轮，悬浮框能够在页面上呈现，不变。

2. 当鼠标点击的时候（悬停），悬浮框里的单个模块部分会变色。

思路：

1. 先设一个大盒子（橙色），里面套入5个小盒子（浅绿色），每个浅绿色盒子相当于一个模块，所以每个盒子中会装有一个（为变色的图片）图片和一行字。对大盒子和小盒子进行设置宽高样式，利用左浮动，使之呈现出悬浮框的效果，最后利用定位，将其定位到界面的右侧。