Html5+Css前端开发小米官网-顶部导航_html小米导航栏代码介绍-CSDN博客

本文链接：https://blog.csdn.net/weixin_41861229/article/details/106560330

实战后的效果

在这里插入图片描述

大家好，我是小叶同学，如今都大二了，跟着学校老师只学到皮毛，不如自己自学，说起来也惭愧，今天实战Html+CSS小米官网顶部导航开发，后面也会一点点对小米官网全部开发，欢迎前来坐坐沙发

思路详解

下载App提示框：通过"子绝父相"，给li标签设置相对定位，提示框设置绝对定位，让它对文字下面进行居中，然后用display:none和block进行显示隐藏，跟轮播图一个原理。

购物车效果：一开始我们都会想用display来进行显示隐藏，这是不行的，display转成块元素后，transition的过渡动画就不能设置了，这里可以用overflow: hidden来隐藏显示，购物车也就一行字，overflow: hidden是根据高度溢出隐藏的，但是我们把高度设置成0，是不是就隐藏了呢。再通过hover进行设置高度就能隐藏显示了，也可以用过度动画展示效果。

废话不多说，代码奉上

Html代码

<body>

    <div class="black_nav">  
        <div class="warp">
            <div class="black_nav_left">
                <ul>
                    <li><a href="">小米商城</a><span>|</span></li>
                    <li><a href="">MIUI</a><span>|</span></li>
                    <li><a href="">loT</a><span>|</span></li>
                    <li><a href="">云服务</a><span>|</span></li>
                    <li><a href="">金融</a><span>|</span></li>
                    <li><a href="">有品</a><span>|</span></li>
                    <li><a href="">小爱开放平台</a><span>|</span></li>
                    <li><a href="">政企服务</a><span>|</span></li>
                    <li><a href="">资质证照</a><span>|</span></li>
                    <li><a href="">协议规则</a><span>|</span></li>
                    <li>
                        <a href="">下载app</a><span>|</span>
                        <div class="triangle"></div>
                        <div class="litel-box">
                            <img src="./img/download.png">
                            <p>小米商城APP</p>
                        </div>
                        <div class="triangle"></div>
                    </li>
                    <li><a href="">Select Region</a><span>|</span></li>
                </ul>
            </div>

            <div class="black_nav-right">
                <ul>
                    <li><a href="">登录</a><span>|</span></li>
                    <li><a href="">注册</a><span>|</span></li>
                    <li><a href="">消息通知</a><span>|</span></li>
                    <li class="shopping_car">
                        <a href="">
                            <i class="iconfont">&#xf0179;</i>购物车(0)
                        </a>
                        <div class="cart">购物车中还没有商品，赶紧选购吧!</div>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </div>
</body>