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>
                                </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>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/Redmi10X.webp">
                                    <span>Redmi 10X</span>
                                </a>
                            </li>
                           </ul>
                           <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>
                             </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>
                             </a>
                         </li>
                         <li>
                             <a href="#">
                                 <img src="./images/Redmi10X.webp">
                                 <span>Redmi 10X</span>
                             </a>
                         </li>
                        </ul>
                       </div>
                   </li>
                   <li><a href="#">电视 盒子</a><i class="iconfont">&#xe501;</i></li>
                   <li><a href="#">笔记本 显示器 平板</a><i class="iconfont">&#xe501;</i></li>
                   <li><a href="#">家电 插线板</a><i class="iconfont">&#xe501;</i></li>
                   <li><a href="#">出行 穿戴</a><i class="iconfont">&#xe501;</i></li>
                   <li><a href="#">智能 路由器</a><i class="iconfont">&#xe501;</i></li>
                   <li><a href="#">电源 配件</a><i class="iconfont">&#xe501;</i></li>
                   <li><a href="#">健康 儿童</a><i class="iconfont">&#xe501;</i></li>
                   <li><a href="#">耳机 音箱</a><i class="iconfont">&#xe501;</i></li>
                   <li><a href="#">生活 箱包</a><i class="iconfont">&#xe501;</i></li>
               </ul>
            </div>
       </div>

CSS文件

.hdm{
    width: 234px;
    height: 459px;
    position: absolute;
    top: 0;
    background-color: rgba(0,0,0,.5);
    padding: 20px 0;
    box-sizing: border-box;
}
.hdm>ul>li{
    height: 42px;
    line-height: 42px;
    height: 42px;
    text-align: left;
    padding-left: 30px;
}
.hdm>ul>li>a{
    font-size: 14px;
    color: #fff;
}
.hdm>ul>li:hover{
    background-color: #ff6700;
}
.hdm i{
    color: rgba(255,255,255,.5);
    float: right;
    margin-right: 30px;
    font-size: 12px;
}
.hdm_hidden{
    width: 993px;
    height: 459px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 8px 16px rgba(0,0,0,.18);
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
}
.hdm li:hover .hdm_hidden{
    display: block;
}
.hdm_hidden ul{
    width: 248px;
    height: 459px;
    float: left;
}
.hdm_hidden ul>li{
    width: 265px;
    height: 76px;
    padding: 18px 20px;
    box-sizing: border-box;
}
.hdm_hidden img{
    margin-right: 12px;
}
.hdm_hidden span{
    color: #333;
}
.hdm_hidden span:hover{
    color: #ff6700;
}