今天在菜鸟教程(http://www.runoob.com)上看的一篇教程,晚上我也亲自动手实践了一下,感觉非常好,内容很详细,尤其是图形展示非常贴切,一目了然,浅显易懂。特此转载。
京东APP首页示例简单框架:
下端导航栏设计心得:
1.核心代码:
HTML部分
<footer>
<ul>
<li><a href="">首页</a></li>
<li><a href="">分类</a></li>
<li><a href="">发现</a></li>
<li><a href="">购物车</a></li>
<li><a href="">我的</a></li>
</ul>
</footer>
CSS部分
footer{
background:gainsboro;
padding: 20px 0px;
border-top: double;
/*
* 导航栏固定在底部 固定套路
*/
position: fixed;
left: 0;
bottom:0;
width:100%;
height: 100px;
}
ul{
width: 100%;
display: flex;
/*
* 按行均分 display:flex; flex:1; 这个解决方式最完美 因为弹性布局默认的就是
* row nowrap
*/
}
li{
list-style-type: none;
font-size: 50px;
flex: 1;
}
2.基本思路
首先,导航栏要始终固定在屏幕下端,应采用固定布局(position:fixed), 但是导航栏的项目需要采用弹性布局,二者不兼容。于是嵌套一个容器,外层采用<footer></footer>容器和固定布局,内层采用<ul><ul/>容器和弹性布局即可实现对应效果。同时需要注意的是 position:fixed;left:0;buttom:0;width:100%; 这样配合使用才能达到对应的效果。
最后,在导航栏的均匀分布上,直接采用ul{display:flex} li{flex:1} 让每个项目占用同样比例的位置,相较而言,比ul{display:flex; flex-direction:row;justify:space-between}效果要好,因为后者始终有偏移量,我暂时未找到具体原因。弹性布局确实是一个很实用的东西,后续若有新的测试,我会继续补充上来。