Html5+Css实战前端小米官网左侧导航（思路+详解+素材）

实战后的效果

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

布局

首先创建一个大盒子，里面给一个居中盒子，居中盒子给一个相对定位，左侧导航根据居中盒子进行绝对定位，相当于对根据Logo定位比较简单

当看到图片的时候，相信各位有了布局思路，我们看看它的组成部分，分别是轮播图和左侧导航，但是你可以看见因为这两个是重叠在一起的，因此可以知道 轮播图 肯定是使用了 position：absolute 来进行定位的，至于左侧开始菜单，也可以使用position：absolute来定位，左侧菜单使用了定位后，层叠优先级会将左侧显示在前面，轮播图就在下层了。

弹出页面框

看到动画效果，左侧菜单切换内容框是没有过渡效果，因此不用设置 transition 属性，就可以通过display的none和block来设置，页面的布局也是通过绝对定位父元素来进行的，全部的定位都是基于父元素居中盒子进行的。这样看起来简单而不会复杂

那里面的内容怎么设置呢？

里面的内容每一列通过ul和li来进行设置，ul最多只能有4个，也就是只能4列内容的显示，宽度计算也很简单 总宽度 / N(取决于你想显示多少列)

li 通过设置内边距填充，使其内容居中 ， padding：上下18px 左右20px

实现一个功能之前，首先在脑海里理清它的布局思路，这样写起CSS样式起来才能得心应手，那我也不废话了，代码奉上

轮播图

轮播图代码请看我另一篇文章，有详细的说明

点击这里跳转

Html文件

           <div class="hdm">
               <ul>
                   <li>
                       <a href="#">手机 电话卡</a><i class="iconfont">&#xe501;</i>
                       <div class="hdm_hidden">
                           <ul>
                               <li>
                                   <a href="#">
                                       <img src="./images/Redmi10X.webp">
                                       <span>Redmi 10X</span>
                                   </a>
                               </li>
                               <li>
                                <a href="#">
                                    <img src="./images/Redmi10X.webp">
                                    <span>Redmi 10X</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/Redmi10X.webp">
                                    <span>Redmi 10X</span>
                                <