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

首先创建一个大盒子里面给一个居中盒子，居中盒子给一个相对定位左侧导航根据居中盒子进行绝对定位，相當于对根据Logo定位比较简单
当看到图片的时候相信各位有了布局思路，我们看看它的组成部分分别是轮播图和左侧导航，但是你可以看見因为这两个是重叠在一起的因此可以知道 轮播图 肯定是使用了 position：absolute 来进行定位的，至于左侧开始菜单也可以使用position：absolute来定位，左侧菜单使用了定位后层叠优先级会将左侧显示在前面，轮播图就在下层了

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

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

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

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

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

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