小米官网给我的感觉是大气、干净。很多特效的加入让人觉得耳目一新,big满满。 看到他们首页的轮播图实现挺有意思,于是自己模仿着写了一个。
大致的感觉出来了,贴个图先:
通过前端神器chrom的F12观察小米官网的HTML代码,不难看到他们使用5个div包裹图片并使用了定位通过z-index来控制div层级,通过控制每个div的opacity属性和display属性进行元素的显示、隐藏。
截图如下(红框内的opacity属性):
好的,实现的手段知道了,那么页面布局先搞出来。
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
Mking_js_