【发布时间】：2017-05-25 18:49:39
【问题描述】：
我正在尝试在屏幕底部为手机应用制作导航栏，类似于：https://dribbble.com/shots/3418526-Poppinz-Navbar-Animation 其中添加按钮是一个圆形图标，比其他选项卡略高。
仅使用 HTML、CSS 和 jQuery Mobile 是否可以做到这一点？
我还在学习编码，我必须使用 jQuery Mobile。我怎样才能做到这一点？
.nav-icons .ui-btn {
padding-top: 50px !important;
font-family: 'lato', sans-serif !important;
font-size: 18px !important;
font-weight: 100 !important;
text-shadow: none !important;
color: #FFF !important;
background-color: #03314c !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
border: 0px !important;
}
.nav-icons .ui-btn:after {
width: 36px;
height: 36px;
margin-left: -15px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-webkit-border-radius: 0;
border-radius: 0;
border: 0px;
}
.ui-btn:active {
background-color: #004d78 !important;
}
#home:after {
background: url("icons/home/home_white_fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
font-weight: 100;
}
#two:after {
background: url("icons/clock/clock_white_fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
#three:after {
position: relative;
display: flex !important;
justify-content: space-between !important;
}
#four:after {
background: url("icons/dollarsign/dollarsign_white fillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
#five:after {
background: url("icons/dotmenu/dotmenu_whitefillmdpi.png") 50% 50% no-repeat;
background-size: 36px 36px;
}
img {
max-width: 50px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, calc(-40%));
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<h1>hello</h1>
<div data-role="footer" class="nav-icons" data-theme="a">
<div data-role="navbar" class="nav-icons" data-grid="d">
<ul>
<li><a href="#" id="home" data-icon="custom">Home</a></li>
<li><a href="#" id="two" data-icon="custom">2</a></li>
<li>
<a href="#" id="three"><img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">3</a>
</li>
<li><a href="#" id="four" data-icon="custom">4</a></li>
<li><a href="#" id="five" data-icon="custom">5</a></li>
</ul>
</div>
</div>【问题讨论】：
标签： html css jquery-mobile navbar