小米官网学习笔记

这个练习是纯CSS，HTML仿写的小米官网（部分）

这个练习中主要就是对定位，浮动的一些练习
这个练习中学习到的一些经验

1. clearfix对于高度塌陷的修复只能用于因为浮动引起的塌陷，不能修改因为定位引起的塌陷，由绝对定位引起的高度塌陷必须要给父元素指定高度
2. 左边的菜单栏看起来是和banner是在同一个div中，但是这里的这个菜单栏是和全部商品分类有关系的，当鼠标停留在全部商品分类的时候，这个菜单栏才会显示，所以这里需要把分类菜单栏写在这个全部商品分类的li标签下，然后通过绝对定位来改变位置

导航栏左侧的小米LOGO的动态效果制作方法

• html

                <h1 class="logo-wrapper">
                    <a href="" class="mi"></a>
                    <a href="" class="home"></a>
                </h1>

• css

.logo-wrapper{
    margin-top: 22.5px;
    display: block;
    float: left;
    width: 55px;
    height: 55px;
    position: relative;
    overflow: hidden;
}
.logo-wrapper a{
    background-image: url(../img/mi-logo.png);
    display: block;
    background-color: #ff6700;
    background-position: center;
    left: 0;
    width: 55px;
    height: 55px;
    position: absolute;
    transition: left 0.3s;
}
.logo-wrapper .home{
    background-image: url(../img/mi-home.png);
    left: -55px;
}
.logo-wrapper:hover .mi{
    left: 55px;
}
.logo-wrapper:hover .home{
    left: 0;
}

这里是在一个盒子里装两个logo，然后水平排列，这里主要用到的是transition这个属性和hover来改变两个logo的位置

右下角小工具栏的定位方法

• 用到了固定定位和一个固定定位的计算公式：

    <div class="to-top">
    </div>

` /* 右边工具栏 */
 .to-top{
     width: 26px;
     height: 206px;
     background-color: #bfa;
     position: fixed;
     right: 50%;
     bottom: 60px;
     margin-right: -639px;
     /* 这里的知识点：left + margin-left + width + margin-right + right = 视口的宽度 */
 }