html：对于制作小米首页遇到问题的解决（1）

目录

1.下拉框动画的制作

2.对于下拉框上部小三角的设置

---

1.下拉框动画的制作

效果图如下

<div class="nav-left">
                    <!-- 左侧导航 -->
                    <ul>
                        <li><a href="">小米官网</a></li>
                        <p>|</p>
                        <li><a href="">小米商城</a></li>
                        <p>|</p>
                        <li><a href="">MIUI</a></li>
                        <p>|</p>
                        <li><a href="">loT</a></li>
                        <p>|</p>
                        <li><a href="">天星数科</a></li>
                        <p>|</p>
                        <li><a href="">有品</a></li>
                        <p>|</p>
                        <li><a href="">小爱开放平台</a></li>
                        <p>|</p>
                        <li><a href="">企业团购</a></li>
                        <p>|</p>
                        <li><a href="">资质证照</a></li>
                        <p>|</p>
                        <li><a href="">协议规则</a></li>
                        <p>|</p>
                        <li class="l1"><a href="">下载app</a>
                            <div class="vm2">
                                <a href="">
                                    <img src="./二维码.png" alt="">
                                    <p>小米商城app</p>
                                </a>
                            
                                <div class="triangle">
                                </div>
                            </div>
                        </li>
                        <p>|</p>
                        <li><a href="">Select Location</a></li>
                    </ul>
                </div>

如上图所见，我们要给“下载app”设置一个下拉框动画

可以运用以下代码

.l1{
position: relative;
}
.vm2{
    width: 120px;
    height: 0px;
    border: 1px solid #F5F5F5;
    box-shadow: 0 0.5px 8px rgba(0, 0, 0, .2);
    /* display: none; */
    background-color: white;
    position: absolute;
    left: -10px;
    text-align: center;
    transition: all .3s;
    z-index: 2;
    overflow: hidden;
    /* padding: 10px; */
}
.l1:hover>.vm2{
    /* display: block; */
    height: 150px;
    position: absolute;
    /* position: relative; */
}
.vm2 p{
    /* display: block; */
    position: absolute;
    margin-top: 110px;
   
}
.vm2 img{
    width: 90px;
    position: absolute;
    top: 10px;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
}

其实，下拉框整体难度不高，主要是在于对动画的设计，我的思路就是给下拉框的高度设为0px，再设置一个展开时间，最后再hover效果里面加上下拉框具体的高度。

2.对于下拉框上部小三角的设置

.triangle{
    width: 0;
    height: 0;
    border: 8px solid white;
    border-color: transparent transparent white transparent;
    border-top: none;
    position: relative;
    bottom: 8px;
    left: 30px;
    display: none;
}
.l1:hover>.triangle{
    display: block;
}

对于小三角的设置，我的思路是这样的首先设置一个盒子将它的内容区都设为0px，再设置一个边距，让三个方向的边距变为透明，选择自己想要方向的小三角，在运用父相子绝的定位设置小三角的位置。

今天的总结如上。不过仍然还有不少问题待解决，本系列会持续更新。