使用CSS模仿小米首页导航栏

仿小米首页左侧导航栏（纯css）

两大部分
- 左侧灰色部分
- - 先上代码
  - 快捷键小技巧
  - CSS
- 右侧部分
- - CSS
  - 页面元素隐藏
总结

两大部分

首先我们先看看小米首页左侧导航栏的样子

首先是左侧灰色部分，不难分析出我们应该使用的是列表元素进行编写。而右侧很明显也应该使用到的列表元素进行设计。不多说直接开始

左侧灰色部分

因为使用纯css写，代码稍显复杂，其实所有的li标签可以通过vue框架v-for进行遍历渲染到页面上，因为是基础学习就使用最基础的方法进行。

先上代码

<!-- 导航栏区域 -->
<div class="nav">
<!-- 左侧导航区域 -->
<ul class="nav-list"><li class="nav-item">手机 电话卡<!-- 右侧导航栏 --><div class="nav-detail"><ul><li><img src="#" alt=""><span>小米10</span></li><li><img scr="#" alt=""><span>小米10</span></li><li><img scr="#" alt=""><span>小米10</span></li><li><img scr="#" alt=""><span>小米10</span></li></ul></div></li><li class="nav-item">电视 盒子</li><li class="nav-item">笔记本 显示器 平板</li><li class="nav-item">家电 插线板</li><li class="nav-item">出行 穿戴</li><li class="nav-item">智能 路由器</li><li class="nav-item">电源 配件</li><li class="nav-item">健康 儿童</li><li class="nav-item">耳机 音箱</li><li class="nav-item">生活 箱包</li>
</ul>
</div>

快捷键小技巧

1.当我们想快速生成许多li标签的时候我们可以ul>li*n(n为整数)再摁下Tab键即可生成一个ul标签和n个li标签。笔者使用的是HBuilder X进行编写，其他的编辑器也应该适用。例如VS等，区别可能是写完之后使用回车生成还是使用Tab键生成的。
2.快速多行进行相同操作。当我们有许多li标签需要添加相同的css时，在标签进行调用时需要一个一个打，即便是ctrl+c v也稍显麻烦，我们可以使用shift+alt键配合鼠标左键下拉即可完成多行同操作，添加相同样式便方便了许多
3.快速创建div和他的class或id，只需要div.classname摁下Tab键即可创建出

div.classname
div#idname
<div class="classname"></div>
<dic id="idname"></dic>

CSS

1.当我们添加上文字的时候会发现html默认了一些margin值和padding值。在今后的前端开发中需要养成使用*通配符选择器来先消除默认的样式，或是调成需要的样子

*{margin: 0;padding: 0;/* 去掉默认小圆点 */list-style-type: none;
}

将默认的margin和padding去掉之后我们通过观察发现导航栏需要用到的ul+li有两大部分，所以我们直接可以再*中将小圆点进行去除，就不需要写两遍了。
2.ul和li是使用一个div进行包起来的，nav样式仿照小米官网的导航栏样式

.nav {width: 234px;height: 460px;background-color: rgba(105,101,101, 0.6);/* 设置上下的内间距 */padding:10px 0;/* 解决padding造成的盒子撑开问题 */box-sizing: border-box;/* 给右侧导航栏区域做一个定位拦截 */position: relative;
}

这里指的注意的是盒子撑开问题，因为使用了div盒模型，往往使用设置padding值进行调整li位置的时候一定要记得此时的width和height已经默默改变了。那么解决这个问题的方法通过调整对应的width和height例如设置了padding-left：50px；那么相对应的width就变为原来数值-50px；height同理，这个做法非常的不方便。所以我们使用box-sizing属性来解决盒子撑开的问题。==box-sizing:border-box;==即可。
3.接下来看ul和li的样式

/* 左侧导航 */
.nav .nav-list {width: 234px;height: 460px;margin-top: 5px;
}
/* 每一栏 */
.nav .nav-list .nav-item {width: 234px;height: 42px;/* 文本垂直居中 和height一样高的时候文本就实现了垂直居中*/line-height: 42px;font-size: 14px;color: #FFFFFF;padding-left: 30px;box-sizing: border-box;
}

这里指的注意的是如何让文本在li中实现垂直居中，用到的方法是line-height和height保持一样的像素大小即可。这里height是42px;于是设置line-height：42px；就可以达到效果

右侧部分

右侧的部分依旧使用的是div包着ul+li这里需要注意的是这一部分我们应该写在左侧部分li标签里。因为他们可以理解为从属关系，如果没有左侧部分，就不会产生右侧部分。接下来看css

CSS

/* 右侧导航栏 */
.nav .nav-detail {width: 800px;height: 460px;background-color: #f99;/* absolute默认相对于浏览器可视化窗口区域定位 */position: absolute;left: 234px;top: 0;padding: 20px 30px;box-sizing: border-box;/* 默认情况隐藏 */opacity: 0;
}
.nav .nav-detail ul li img {width: 40px;height: 40px;float: left;margin-right: 20px;
}
.nav .nav-detail ul li {/* 从左往右排列 */float:left;width: 180px;
}
.nav .nav-list .nav-item:hover .nav-detail{opacity: 1;
}
/* 鼠标移到导航栏每一项时 背景颜色变橘色 */
.nav .nav-list .nav-item:hover {background-color: #ff6700;}

（1）这里需要注意的知识点是position定位属性。在前面的520笔记中大体介绍过position:absolute绝对定位。产生top，left等四个属性。通过这四个属性调节位置。这里不再赘述。我们同样使用opcity:0来实现整个div的隐藏。
（2）值得注意的还有img和li的样式，设置了float属性，即是浮动属性，从左往右排列当一行装满的时候将自动切换到下一行。
（3）要实现当用户把鼠标放在左侧部分li上的时候而使得右侧部分出现使用到的是：hover伪类。
解读代码就是先找到.nav-item即是找到左侧部分的li，然后：hover表示当用户鼠标放上去的时候，然后后面写上.nav-detail即是需要调整.nav-detail的样式，将opcity透明度调整为1，则可以实现当鼠标放上去时出现右边部分。

页面元素隐藏

页面元素隐藏的方法：
1.display:none;
2. visibility: hidden;visibility 属性规定元素是否可见。默认可见可继承
3. opacity:0;
4. position:absolute;left:-10000px;

总结

这是一个很简单的练习，但是里面的小知识点也不少，应该将这些基础都归纳总结在今后的学习工作中少走弯路。