小米官网仿写总结

前言

这次仿写小米官网算是一次全新的突破了，基本上把我集训所学全都用上了，也是耗费了非常多的时间才最终完成。相较于上一个学校官网的仿写我明显能感觉到自己的总体布局更加合理和清晰了，细微之处也处理得更加完善了，但仍然需要精进。

总体思路介绍

对于官网的架构，我根据背景颜色不同大致分成了三个大块，即导航栏，中间部分及结尾商标部分，而其中过程最为繁琐的部分当属二级菜单商品栏部分，对此我较为细致的对其进行了多级分层和定位，虽然未做到完美的自适应效果，但总体来说还算理想。此外便是内容部分的填充，为了达到较好的显示效果，我大都根据官网的样式做了还原。细微之处不在此过多赘述。

编写过程中的问题及解决方法

我编写过程遇到的第一个问题就是每个盒子的层级显示问题，总是会因为层级原因而导致运用hover属性时会造成被下面的盒子所覆盖的情况

解决后

解决方法 

先给其加上相对定位，然后再用z-index来设置层级，如父盒子用相对定位层级设置为20的话

子盒子加上hover属性后设置为绝对定位层级设置为低于20的数就可以了。

.top2{
            width: 100%;
            height: 100px;
            background-color: #fff;
            position: relative;
            display: flex;
            justify-content: center;
            color: #757575;
            position: relative;
            z-index: 998;
        }

.top2>div:hover ul{
            width: 100%;
            height: 230px;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,.15);
            position: absolute;
            z-index: 997;
        }

尤其要注意div中的二级菜单ul的样式写法

注意由于下面也有二级菜单，对层级设置应该是一种递减的趋势，以便让上层盒子能够显示在上层。

问题二：透明横行二级菜单在轮播图上的显示

解决方法，将其与轮播图的盒子并列，并设置绝对定位和浮动效果，最后则是设置z-index使其能够显示在轮播图上面。如

.middle>.left{
            height: 460px;
            color: #fff;
            background: rgba(105,101,101,.6);
            list-style-type: none;
            position: absolute;
            left: 210;
            top: 0;
            z-index: 1;
            opacity: 1;
            width: 234px;
            margin-top: 140px;
        }

效果图

另外要注意的是透明度的设置大盒子的透明度设置为一，而对其背景颜色设置对应透明度，才可使其二级菜单不会也变成透明的。

问题三

盒子的阴影和上移效果。

解决方法

在hover属性后分别加上box-shadow和动画属性即transform: translateY上移效果，此外还可以设置阴影透明度以免阴影过重。

.right>div:not(:last-child):hover{
            box-shadow: 4px 4px 10px -4px rgba(0,0,0,0.3);
            transform: translateY(-5px);
        }

还可根据所需设置动画时间如transition: all 300ms;

核心代码讲解

本官网的核心代码应该就是轮播图上的二级菜单设置

首先将二级菜单与轮播图的盒子并列，并设置绝对定位和浮动效果，最后则是设置z-index使其能够显示在轮播图上面，具体情况问题二已经说明，在此不过多赘述。

总结心得

对于这此小米官网的仿写我感觉还是有进步的，但和各位大佬相比仍然不值一提，因此持续学习是必要的，争取继续进步。