先上效果图:
<!DOCTYPE html>
<html>
<head>
<title>移动端通用顶部选项卡</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
</head>
<style>
ul,li,header{display:block;margin:0;padding:0;border:0;}
body{font-family: '微软雅黑';color:#666;min-width: 320px;max-width:750px;margin: 0 auto;cursor:default;word-break:break-all;white-space:normal;-webkit-tap-highlight-color:rgba(255,255,255,0);font-size:26px;background-color:#f5f5f5;}
ul{list-style: none;}
a{text-decoration:none;}
/*iphone上的Safari解析input[typw="submit"]和input[type="submit"]按钮会以苹果浏览器默认的UI进行渲染,解决发放如下*/
input,input[type="button"],input[type="submit"],input[type="reset"]{-webkit-appearance: none;}
/*header*/
.favor-header-bar{
background-color: #fff;
padding: 0 1.1rem;
overflow: hidden;
height: 3.46rem;
line-height: 3.46rem;
border-bottom: 1px solid #e1e1e1;
}
.favor-header-bar li{
display: block;
width: 25%;
text-align: center;
float: left;
margin-left: -1px;
height: 2.3rem;
line-height: 2.3rem;
margin-top: 0.58rem;
border-right: 1px solid #e1e1e1;
position: relative;
}
.favor-header-bar a{
font-size: 1.1rem;
color: #333;
display: block;
padding-bottom: 0.5rem;
width: 85%;
margin: 0 auto;
}
.favor-header-bar li:last-child{border-right: none;}
.favor-header-bar li.default a{
color: #139dea;
border-bottom: 2px solid #139dea;
}
.favor-header-bar li span{
position: absolute;
display: block;
width: 25%;
top: -0.4rem;
right: 0.2rem;
max-width: 32px;
}
</style>
<body>
<header class="favor-header-bar">
<ul class="tabs">
<li class="default"><a href="javascript:void(0);" hidefocus="true">默认</a>
</li>
<li><a href="javascript:void(0);" hidefocus="true">项一</a>
</li>
<li><a href="javascript:void(0);" hidefocus="true">项二</a>
</li>
<li><a href="javascript:void(0);" hidefocus="true">项三</a>
</li>
</ul>
</header>
</body>
</html>