在網上查了資料，大部分都是安卓的，沒有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%;
}

最終實現效果：