移动端手机端新闻资讯类app选项卡效果代码-html代码-BFW代码库

代码语言：html
代码描述：移动端手机端新闻资讯类app选项卡效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
<style>
 html,body {    color: #333;    margin: 0;    height: 100%;    font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    font-weight: normal;}* {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}a {    text-decoration: none;    color: #000;}a, label, button, input, select {    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}img {    border: 0;}body {    background: #fff;    color: #666;}html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {    margin: 0;    padding: 0;}a {    text-decoration: none;    color: #08acee;}button {    outline: 0;}img {    border: 0;}button,input,optgroup,select,textarea {    margin: 0;    font: inherit;    color: inherit;    outline: none;}li {    list-style: none;}a {    color: #666;}.clearfix::after {    clear: both;    content: ".";    display: block;    height: 0;    visibility: hidden;}.clearfix {}.divHeight {    width: 100%;    height: 10px;    background: #f5f5f5;    position: relative;    overflow: hidden;}.r-line {    position: relative;}.r-line:after {    content: '';    position: absolute;    z-index: 0;    top: 0;    right: 0;    height: 100%;    border-right: 1px solid #D9D9D9;    -webkit-transform: scaleX(0.5);    transform: scaleX(0.5);    -webkit-transform-origin: 100% 0;    transform-origin: 100% 0;}.b-line {    position: relative;}.b-line:after {    content: '';    position: absolute;    z-index: 2;    bottom: 0;    left: 0;    width: 100%;    height: 1px;    border-bottom: 1px solid #e2e2e2;    -webkit-transform: scaleY(0.5);    transform: scaleY(0.5);    -webkit-transform-origin: 0 100%;    transform-origin: 0 100%;}.aui-flex {    display: -webkit-box;    display: -webkit-flex;    display: flex;    -webkit-box-align: center;    -webkit-align-items: center;    align-items: center;    padding: 15px;    position: relative;}.aui-flex-box {    -webkit-box-flex: 1;    -webkit-flex: 1;    flex: 1;    min-width: 0;    font-size: 14px;    color: #333;}/* 必要布局样式css */.aui-flexView {    width: 100%;    height: 100%;    margin: 0 auto;    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-box-orient: vertical;    -webkit-box-direction: normal;    -webkit-flex-direction: column;    -ms-flex-direction: column;    flex-direction: column;}.aui-scrollView {    width: 100%;    height: 100%;    -webkit-box-flex: 1;    -webkit-flex: 1;    -ms-flex: 1;    flex: 1;    overflow-y: auto;    overflow-x: hidden;    -webkit-overflow-scrolling: touch;    position: relative;}.aui-navBar {    height: 44px;    position: relative;    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    z-index: 1002;    background: #fff;}.aui-navBar-item {    height: 44px;    min-width: 25%;    -webkit-box-flex: 0;    -webkit-flex: 0 0 25%;    -ms-flex: 0 0 25%;    flex: 0 0 25%;    padding: 0 0.9rem;    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-box-align: center;    -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;    font-size: 0.7rem;    white-space: nowrap;    overflow: hidden;    color: #808080;    position: relative;}.aui-navBar-item:first-child {    -webkit-box-ordinal-group: 2;    -webkit-order: 1;    -ms-flex-order: 1;    order: 1;    margin-right: -25%;    font-size: 0.9rem;    font-weight: bold;}.aui-navBar-item:last-child {    -webkit-box-ordinal-group: 4;    -webkit-order: 3;    -ms-flex-order: 3;    order: 3;    -webkit-box-pack: end;    -webkit-justify-content: flex-end;    -ms-flex-pack: end;    justify-content: flex-end;}.aui-center {    -webkit-box-ordinal-group: 3;    -webkit-order: 2;    -ms-flex-order: 2;    order: 2;    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-box-pack: center;    -webkit-justify-content: center;    -ms-flex-pack: center;    justify-content: center;    -webkit-box-align: center;    -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;    height: 44px;    width: 50%;    margin-left: 25%;}.aui-center-title {    text-align: center;    width: 100%;    white-space: nowrap;    overflow: hidden;    display: block;    text-overflow: ellipsis;    font-size: 0.95rem;    color: #333;}.icon {    width: 20px;    height: 20px;    display: block;    border: none;    float: left;    background-size: 20px;    background-repeat: no-repeat;}.icon-return{    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACWklEQVRoQ+3bT0tVQRjH8a8QihCJ4kJ6AwVtQmgjihJGhdDGjb2K3ouvwhYtRNCEEqNw48I2LdrUOigSEZEikB+cE8PhHBVnnpnnXL2bC/feGeZz5pln/pxzh7hmr6Fr5uUG7LDH7wFTwCfgX2z7vPfwMrAG3KreXw4y+AXwpsLK+RcYHlRwEyvna2BlEMFt2G1An/8ZNLApVhfLU9Iyx3oCZ8F6AWfDegC3YXeA5ykSVFuCKzmGu7BLwGlsNu4qXwpcBFsqpIthS4CfARvBclFt0Jg1DeMwvHOGtLDrjfVwVmzOHnaBzQV2g80BdoW1BrdhdWrxxHKevWj+tkpaXdinwMlFjbL83gLsFmsR0q6xqcHusSnBvcCmAvcGmwL8GNhqLBc19RTPxlbbw1/ARFC5a2yKHj4ExgLwXtW7x5ZzaUzdsfOwVk3a7o0EjdgHFOou0bFgOReAt31BpwD3Cp0KfB56ETiKGXcpy6YE1+hNYDRo5Gdg3gs6NVjOGeCdV7QF2DXaCuwWbQmu0bq3e7sxpjVP/06ZjC5blzVY7XhUnT2H6C/AXAl0DrArdC6wG3ROcI3WlHUnGHMKby1Pf152HMb8LjdYbX0IfGigvwKzOdAlwEXRpcDF0CXBNVp3EMeDcWka3qXBcj4APragteH4EZOg2sp6AHehv1UbkaRoL+BsaE/gGr0LTAbhmLSnvYHl1APhOu41QXsEd6EPgOnYJOYV3IbWo8PhcfCV7J7BAt0H3gN3gVfA6pWUQSHvYDVVB4L6k8f3WKzK9wGcwvm/jhtw0svpsLIzwzyZPQ8HYYoAAAAASUVORK5CYII=');}.m-slider {    overflow-x: hidden;    width: 100%;    position: relative;}.slider-wrapper {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    width: 100%;    height: 100%;    -webkit-transform: translate3d(0px, 0px, 0px);    transform: translate3d(0px, 0px, 0px);    position: relative;    z-index: 1;    -webkit-transition-property: -webkit-transform;    transition-property: -webkit-transform;    transition-property: transform;    transition-property: transform, -webkit-transform;}.slider-item {    width: 100%;    height: 100%;    -webkit-flex-shrink: 0;    -ms-flex-negative: 0;    flex-shrink: 0;    background: #f6f6f6;}.slider-item img {    width: 100%;    height: auto;    display: block;    border: none;}.slider-pagination {    text-align: right;    position: absolute;    width: 100%;    z-index: 2;    right: 0;    bottom: 10px;    pointer-events: none;    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-box-align: end;    -webkit-align-items: flex-end;    -ms-flex-align: end;    align-items: flex-end;    -webkit-box-pack: center;    -webkit-justify-content: center;    -ms-flex-pack: center;    justify-content: center;}.slider-pagination >.slider-pagination-item {    margin: 0 .25rem;    width: 8px;    height: 8px;    display: inline-block;    border-radius: 100%;    background-color: rgba(255,255,255,0.4);}.slider-pagination >.slider-pagination-item.slider-pagination-item-active {    background-color: #fff;    border-radius: 100%;}.aui-palace {    padding: 0.5rem 0;    position: relative;    overflow: hidden;}.aui-palace-grid {    position: relative;    float: left;    padding: 1px;    width: 20%;    box-sizing: border-box;    margin: 5px 0;}.aui-palace-grid-icon {    width: 30px;    height: 30px;    margin: 0 auto;}.aui-palace-grid-icon img {    display: block;    width: 100%;    height: 100%;    border: none;}.aui-palace-grid-text {    display: block;    text-align: center;    color: #333;    font-size: 0.85rem;    white-space: nowrap;    text-overflow: ellipsis;    overflow: hidden;    padding-top: 0.2rem;}.aui-palace-grid-text h2 {    font-size: 0.8rem;    font-weight: normal;    color: #666666;}.tab-nav {    height: 40px;    line-height: 40px;    display: block;    position: relative;    background: #fff;    z-index: 1;    width: 100%;    margin: 0 auto;    box-shadow:0 3px 4px #e2e2e2;}.tab-nav-item {    height: 40px;    line-height: 40px;    position: relative;    text-align: center;    color: #585858;    font-size: 0.9rem;    display: block;    float: left;    width: 20%;}.tab-nav-item.tab-active {    /* background-color: #51bd03; */}.tab-nav-item.tab-active a {    color: #000000;    font-size: 0.8rem;    font-weight:bold;}.tab-nav-item a {    display: inherit;    font-size: 0.8rem;    color: #666;}.tab-panel {    position: relativ.........完整代码请登录后点击上方下载按钮下载查看