移动端通用顶部选项卡

The_Quan

于 2018-10-26 11:11:18 发布

阅读量1.5k

点赞数 1

分类专栏： HTML5 CSS

HTML5 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

先上效果图：

<!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>

The_Quan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
移动端通用顶部选项卡

先上效果图： &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;移动端通用顶部选项卡&lt;/title&gt;&lt;meta charset="UTF-8"&gt;&lt;meta content="width=device-width, initial-scale=1.0, maximum
复制链接

扫一扫

专栏目录