本篇文章紧张给大家先容一下利用html+css来模拟制作小米官方网站右侧的浮动框。我们来看下边的这个浮动框，位于小米官网的右侧并且随着页面的滚动，一贯浮动在右侧不变；
我们通过上边的图片可以看出图片有5个单独的块元素组成，每个块元素鼠标经由都有一个单独的颜色变为黄色的效果，然后第一个块元素鼠标经由还会在左侧弹出更多内容。接下来我们大略说一下制作所用到的核心知识。
1）制作页面所需知识点1、列表标签（dl dd dt）的利用，利用dl和dd来完成前边5个相同模块的制作
2、鼠标经由（hover）的利用，第一个元素鼠标经由左侧显示，这个跟我们之前将的导航菜单类似，还有鼠标经由笔墨以及图片改变颜色，这里可以利用hover之后改变背景图片来实现；
3、浮动（fixed）的利用，该内容一贯浮动在网页右侧，跟随页面一起滚动，我们可以利用position:fixed来实现；
2）代码实操演习训练大体理解了我们所要利用的知识点之后，我们就可以开始根据图片上的内容来制作我们所须要的页面了，详细的实当代码就如下方所示：（首先写一个div盒子，看到列脸色势，直策应用dl和dd，然后每个元素内部有笔墨和图片，利用h4标签和span标签来存放图片和笔墨内容，就这么搞定了哈哈），来看代码吧。
html代码挺大略的，我们啪啪敲完之后呢，剩下的便是书写css代码，来完成图片所示的布局样式的制作了。那么我们的css代码就如下图所示：（最外层box直接来个fixed和right、bottom合营，让其浮动在右侧，然后写写dl和dd的宽高，掌握掌握span的背景，随便写写hover事宜，ok完成了）。不多说了，看代码吧。
好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有须要源码的可以直接私信【网站源码】即可。
逐日金句：只有知作别民气里在想什么，你才能得到你想要的。喜好我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
