移动端手机端新闻资讯类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: relative;    overflow: hidden;}.tab-panel .tab-panel-item {    width: 100%;    position: absolute;    top: 0;    -webkit-transform: translateX(-100%);    transform: translateX(-100%);}.tab-panel .tab-panel-item.tab-active ~ .tab-panel-item {    -webkit-transform: translateX(100%);    transform: translateX(100%);}.tab-panel .tab-panel-item.tab-active {    position: relative;    -webkit-transition: -webkit-transform .15s;    transition: -webkit-transform .15s;    transition: transform .15s;    transition: transform .15s, -webkit-transform .15s;    -webkit-transform: translateX(0);    transform: translateX(0);}.aui-car-img{    width:120px;    height:auto;    position:relative;    border-radius:5px;    overflow:hidden;    margin-right: 0.8rem;}.aui-car-release{    position:absolute;    left:-4px;    top:-2px;    background:#65b05e;    color:#fff;    padding:0.05rem 0.2rem;    font-size:0.7rem;    transform: scale(0.8);}.aui-icon-play{    position:absolute;    right:5px;    bottom:5px;    background-color:rgba(0,0,0,0.6);    border-radius:20px;    padding:0.25rem 0.5rem;}.aui-icon-img{    position:absolute;    right:0;    bottom:0;    background-color:rgba(0,0,0,0.4);    border-radius:20px;    padding:0.15rem 0.5rem;}.icon-play{    margin: 0 auto;    display: block;    float: initial;    width: 8px;    height: 8px;    background-size:8px;    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAC/UlEQVRoQ+WbuYsUQRSHv99/YbRibiLmCpoYuYGBJoIoi0aerCjei6C464WBR+KxHpkIRmqgoIIXHmisKEaeCJ6BljzshsWd7uma7pnurqp0Xr1+X9dUvX5HiS7DObcU2A7MTkS/AOeASUkPu81v2u/KM8g5dxRYmyNzD9gs6XbTwLLsyQR2zg0DVwqCnAE2SvpcUL42sTzg18CQh2XvgfWSLnrMGbhoR2Dn3FzgUY/WXANWS7IX1riRBbwGOF7C2p920Ek6WEJHX6ZmAe8BdlbwxKfAckkvKtBViYos4APAaCVP+KfEVnqHpB8V6uxJVRbwBLCpJ43Zk2xPr5B0q2K9XuoGCZwaNgmsq8uF1QFs4B+ADZLOey1PBcJ1Aaem30z+5m8qYCmkom5gM/I7sAs4JOlPIatLCDUBODXfXJgdas9K8HSd2iRgM/Y3cKSfLqxpwOkKmQsbkXSj65J5CjQVOMW4kAQkdqpXMpoObJAf7SNI0tkqiNsAPNWFrZL0qgx4m4CN077FLbCZkGQHnPdoG3AK+DyJwrxdWFuBUxd2LIm7vxVd6jYDp4xvgZVFXVgIwCn4ySQK+5W32iEBG6ft6QWSPmVBhwZsnHeA+VmBSIjABm3ppL2dVjlUYCsIDEn6+j90qMDGuVjS1ZiAreY1HhPwVkn7YwJeIulyLMB2WM2QNO2TM9RDa7cki6qmjRCB7wLzYvnweAIszKtqhLTCJ5L8V/DBQzThoVUpLAGwrdNpHFq0FE2Kx5J4Y8B4DEk8qzRGkaaNKhFvPV/WLRB8qSWaYlpU5dJoCuJRtTxE09QSVduSddNbm3EtvdWDDA8b3XpYdXOpZQ/Hmtxcaq3DHXNCReuwiVxr2odHgFOecFPFzdVYg/jhEjr6MjVrD88BHvf4xOtJj9XA+id97My75PESmOWh7F1y+l7ymDNw0TzgZUBR408nvVS1uBqft5YJbEqcc1uAfTkK79tVgSAuaqWQzrlFticBu9ozE7BVtJZAu4r3wOftNkH2L42IbEyFwjgiAAAAAElFTkSuQmCC');}.icon-img{    margin: 0 auto;    display: block;    float: initial;    width: 12px;    height: 12px;    background-size:12px;    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACwUlEQVRoQ+2bjXHUQAyF9SoAOoAKQiqA6wAqACogVECoAFIBSQWECshVkFABlJAOHvPCesYYr/9udbLvvDOeTOZya3162l1JdmBmRvKVmX00s+f6/QDHjZl9AnADki/N7McBQrYhbQR8e8DKNqG3AuaRqPuAuQI31L4wMy34+4VEwWMz0wb8Jmdvl8KnAO4WAvqPmenU+dZmew74AsDZEmErm0letimdA34N4HrhwBLsc5MhB7zRIb1w4Nb8YjIwSW0QJ2amiX+b2RaAfs5i5BKqScAklYYqZARdH4qKD3PY7IoBk9Tup60/N3SEaQ8IXRJFgEmepyKjL2wF/QxA2Pm9M3Bas79awjgHr9D+0ucZr89LAI+tqrSJ6TshowTw0HCuAO8BPAmh/Vvj73YskXxrZl9HAPwEENZQKAEs41U7Dx1XAOSkkLEzsKwmqaPmxUCC0GytFLBUFvSjHuhQdZM4u63hCjB5ToVFDjoctihwmkwppdanMi6prhxatfNldIbVEOa/5uSkXHrgGi76ZyTlWO0fClU5XNfoU2DWwCm7e5+i6WkJD84SOIGqeC9+rM0OOPWjlOA0S88SAmfbtCFnKEmBFle17qlZKOwZws2wmAtwX1OhSDhrkvCu5T7CeEhI69GiykHXQbK1lep505zCdwBOPW88odwsYk7Xoxa3ZnzKmpT2uRw9XZ7pAnZpxEXCdm1alZNUELwr1WdOYawMau/KVkBDng9L6TMAV1MX0T7P2T4bhwDX1Vbb9fvQfnMt+W97StFnm8vnY4DrBqjroUsh32y2q6rRVdXKLoZPnXQq8NT7hX9vBQ6XwNmAVWFnB4dPvyocLoGzAavCzg4On35VOFwCZwNWhZ0dHD79qnC4BM4GrAo7Ozh8+qNUWG0avQZ8DOPh33jGvlK4ZMdsIOsTtDqSh6r01szO9cLNH51C6GhMYZY8AAAAAElFTkSuQmCC');}.aui-car-img img{    width:100%;    height:auto;    display:block;    border: none;}.aui-flex-box h2{    overflow: hidden;    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;    word-break: break-all;    text-overflow: ellipsis;    color: #505050;    font-size:1rem;    text-align: justify;    font-weight: normal;    margin-bottom:0.4rem;}.aui-flex-box span{    color:#507cf7;    font-size:0.7rem;    border:1px solid #507cf7;    border-radius:2px;    margin-bottom:0.2rem;    display:block;    width:45px;    text-align:center;    transform: scale(0.8);}.aui-flex-box p{    color:#999999;    font-size:0.8rem;}.aui-content-list {    display:block;    border-bottom:5px solid #f0f0f0;}.aui-content-list .b-line:after{    left:15px;    width:92%;}.icon-share{    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAHOUlEQVRoQ+2aeWxURRzHf79520OLpTWe1BMkaFQ0eBG8jcFbE03RiEDtvplFYtVoookJuipqNPEkBHdm2SKVBC2i0eAVDzQaNRoNajxKlBileES7KER2u+/9zJT3mudmt923nbcS7fzX7fy+8/vMb94cvxmE/1nB/xkvjAP/1yM+HuHxCFfZA8lkkm3duvU013UvB4BZANCGiAcAAAOAP6SUE0eSbm9vr29tbc1V2jwRDVVF3DVoBwYGGnp7e/PF9saHtG3bZzHG5gBAOwDsU8bhbVLKFlPAPqyvp6EjB04kEpcQ0R0AcGIFURmQUu5tArg4sv7f2Ww2mgjH4/FDLcuSADC7FADt8uBzAPgaEb8HgO+J6Bul1OujdAzatn3mSHUcx5lgWdYjjLEjgvV0k5EAc87PA4BnEbGpyLFf9O8A8NbOnTvfXLVq1W8VRD1UlY6Ojpa6urq3EPH4YthIhrQQ4nYiWoL+LLGr1b9c1304l8vd39PTsyMUQYjKpWCJ6FsAmGJ80mpvb7daWlqeQsSrinp2jeM4t2Qymf4QvoeuWiayGx3HWWxZ1gu+oKlJCznnzyPipQFPdVTnp9PptaG9D2lQDjafz58Vi8VmMMbeMAoshHgEAG7yRYloMxFdlE6nvwrpe+jqI8GuXLkya9v2OUaBvWVneMgQUV8sFpu5fPnygdDehzQYDVbLGQW2bXt/xpiOYqvn67ZCoTAjk8l8F9L30NUrgTUOLIRYDQBXe966iDg7lUoNfy+hKSo0qBTWKDDnfBYivhfwMSmlvKtCn6uuFgbWNPD7iDhTixJRf2Nj4+SlS5dWvKmvhjgsrDFgIYTeLr4amJXnK6V6qoGo1KYaWJPAGtbfI38ppTy6UserqVctbJi2yh4P9aGAMbY5sHVMSCn1ISGSUgtY7XhZYCHE9QCw1KcrFAptUW0bawU7IjDn/GlE1Ad5XT6VUs6IIrS1hB0twpsB4DAP8h4ppT7cGy21hi0L3NXV1ZDL5XYGZufLlVLPmaT9N2DLAgshjgWAzwKAM6WUH5oEFkIkAeDOgOZGferRBwGT7RRrlZy0bNs+nTH2jl95cHDwkO7u7h9MOyKEWAkACwCgJrBlI5xIJM4nopd1BZ2T2rRpU/2GDRsKpoG1no50Pp9/NOrI+r6Xi/CFjLH1PjAiNkgpB6MANqWZSCTOIKK3fb0dO3ZMXL169R9VDWnXdQ9Op9M/mnIuCh3O+RxEfNrXnjRpkpVMJt1KgaczxjYGZumTlVIfReGoKU3OeRciPu6Nyj+VUs2ltEsO6RLL0mVKqeFshyknTeoIIe4FgNs9zY+llCdVDKwrcs5/QsT9vR5bopRabNJB01pCCJ0H1/dYeqLtUUrNDwv8IiJe7BlFtrU0Aa5Tx62trXqC2tPTu15KuSwUsBDiBgB4zDcaHBzcr7u7+1cTDprWKE7gOY5z7IoVK74IB.........完整代码请登录后点击上方下载按钮下载查看