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;
}