仿闲鱼底部凸起导航栏

在网上查了资料，大部分都是安卓的，没有css的。所以我决定自己动手写一个。

实现思路：

1. 原有基础上有四个底部导航栏图标，新加一个占位（用的是mui框架,如果不加还要自己写布局）

<a class="mui-tab-item" href="#tabbar-with-chat">
				<div class="circle">
					<!-- <div class="mui-icon mui-icon-plusempty"></div> -->
					<img src="../../static/img/fresh.jpg" alt="">
				</div>
				<div class="post">刷新</div>
</a>

2.上面的circle就是我中间凸起的块块。
接下来是css

.circle {
  position: fixed;
  width: 50px;
  height: 50px;
  background-color: white;
  bottom: 23px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border: 1px solid;
  border-radius: 50%;
}
.circle img {
  position: relative;
  top: 10px;
  width: 60%;
}

最终实现效果：