css布局实现移动端手机端资讯类个人中心我的页面效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现移动端手机端资讯类个人中心我的页面效果代码
下面为部分代码预览，完整代码请点击下载或在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 {
        width: 100%;
        height: auto;
        display: block;
        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%;
}
.jui-flex {
        background-color: #f7f7f7;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 15px;
        position: relative;
        border-top: 1px solid #E8E8E8;
}
.jui-flex-box {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        min-width: 0;
        font-size: 14px;
        color: #333;
}
/* 必要布局样式css */

.jui-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;
}
.jui-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;
}
.jui-navBar {
        height: 44px;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        z-index: 102;
        background: #fff;
}
.jui-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;
}
.jui-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;
}
.jui-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;
}
.jui-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%;
}
.jui-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,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAIAAABKGoy8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkUwQTc3ODM3QUMwMTFFOUE5MTBCNTFGQTA0NTIxQ0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkUwQTc3ODQ3QUMwMTFFOUE5MTBCNTFGQTA0NTIxQ0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2RTBBNzc4MTdBQzAxMUU5QTkxMEI1MUZBMDQ1MjFDQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2RTBBNzc4MjdBQzAxMUU5QTkxMEI1MUZBMDQ1MjFDQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvrQISYAAAe2SURBVHja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');
}
.icon-share {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAIAAABKGoy8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkUwQTc3ODc3QUMwMTFFOUE5MTBCNTFGQTA0NTIxQ0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkUwQTc3ODg3QUMwMTFFOUE5MTBCNTFGQTA0NTIxQ0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2RTBBNzc4NTdBQzAxMUU5QTkxMEI1MUZBMDQ1MjFDQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2RTBBNzc4NjdBQzAxMUU5QTkxMEI1MUZBMDQ1MjFDQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhXkxyMAAAWOSURBVHja7FldKKRfGDdjagZpV6EtbhZbQovRbj5WYXOzF5SEIlESRbFXaycXErnApYvlhlaS2vVZdsNcsNjNV9Yu7TAjrY/YtWLN/H3O/9ecf8fb+8573nc+tn9tnovTMe95zvM7z3k+D4XVavVwnMClUChcX8MmpXNsDKn0tC4icx6cc7j/f3BupFtwfzk452KKmKuyF9TV1T158mRtbY3NruR6GXtrfLVYLP8wyWojMZQk8mE8Ozvb3d0tKChYXV1lePoNILGYqdfrh4eHP3369OPHj/Pzc7ZiNBpNX19fRESE2IbkR+xTUVExMTFx586d169fh4eH2xXN0pbBYHjx4sXi4qJS+Z+C1Wo1G5yvr293d3dISIhktLu4uAC+sbGxu3fvUnwEzA0vuYjr62veZGpq6uHDhxCTkJDw6tUrk8mE7awyiO4g+eny8rK0tBQiYmNjV1ZWhIweQmaM0Fl0dDTYnj9/bjabrY7QtY3EzsxDgPstKyuDoJiYmC9fvtgHx+PJyckJDQ2trq6mcCW14jQdHBxAHPBptVqYEPeTHZubnJwsKioKDAyEwXp5ebm91sAJ5+bmZmZmFhYWoK1fv37RbWHTX79+pStVQuaRkRGMhYWFQmSu5HWINxqNcBf4/uHhISDCz/AjAPn7+29vb2MO5XFZVMIt5ufnMUlLS3NjrP/27VtLS8v4+Di5qPv37z99+jQuLg4+BwfPz88HOCDr6Ojgo+FRZGQkDO709NQ5G7q6uuL+eXx8rNPpwsLCACgqKqq2thaBl9ouHLakpAQGl5qaCnWyvJVQiI2cM3+eAwEHpGI3hLH6+nqYF2/9y5cv8fXRo0ebm5sSoYQQ1IZTuu6G/f39SBWQnZmZub6+Lgw3bW1t+IqLgmfwTiWtOeeICOjp6cEhsU9NTQ0yqTAeAToW4LrfvXsnFrDsBGEXwYHevHnz4MEDCO7s7LQLfXp6GhcNKXSBXRPyEOaWUBs5HW9nZ2eBDILb29t5UqmG8vLyYDmNjY3srZy/Vrtp4+fPn/Hx8Thbc3MzgxeZoKurS/L8LtmcEB8yHngRt0hAYYuXBOdSmU6zBZl8/PhxYGAAeaWpqYlEf24BS+tQ+WlQ6cbSvLW1FWN5eXlQUBBFzEXAxSonDboBHBGztLSEdO7n51dcXMwTTEtIrrZoNc+odt2mud7eXoy5ubne3t5iVYxQiwob/RFw9NAw//fv32OSlZUl9mLCa3xQCnz+/JlrkcL9Va4go1aF/HN0dEQCJPeTcEKx4vaR6ZeXl1UqlZjylAx9yO9kUcJgRI6368V2zf/379/nNhL6jX3NUSPgd0EifkD1kZKSMjQ0hMQg87mOF2XESCXseKmRSoYi7jLSq8p8SMQcEZjtDTfXyrUJUs/IDEVEhqQNcNdwr4XNpRT6lKenp3yfoP22nJNwLUGOZSuF/D4+PhB5cnIi88FGvgNRy0HosVgs8FONRiM3zpHd7927h3FjY0OmDhguafdyMZpMJrCj+yS3JHYqpZA5KSkJq0lQdejtV/KRis5R/eLPxMREoUWKdl+khkGWRCxFp4Re/E90+QjXaApRWX348EFuyUSvKTo6Oj093Ww2V1ZW0iDp0AshYzF6waqqKrRhiTaSZhbS/v5+cnIyDpednf39+3e36A87kAdDbPv48eOdnR1JFgXP16ieDAYD2l0gU6vVGRkZ0GVwcDC6c5lqo2EWczjm1taWXq9/+/YtLgQOh/YCHaF0kGcIg/IbGhoGBwdJze3i+w3JB8+ePdPpdAEBAbK8m/fsyh3J70ajcXR0FIXk3t4eErycnEjjM1mJwh3a0mq1QEbKFrnpUShJmKEdevlisDi6m5IdwOwGWMk0yi5q5J9TYXXHvx9u/710C+4vAfevAAMAUPioAi7KqzQAAAAASUVORK5CYII=');
}
.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%;
}
.jui-palace {
        padding: 0.5rem 0;
        position: relative;
        overflow: hidden;
}
.jui-palace-grid {
        position: relative;
        float: left;
        padding: 1px;
        width: 20%;
        box-sizing: border-box;
        margin: 5px 0;
}
.jui-palace-grid-icon {
        width: 30px;
        height: 30px;
        margin: 0 auto;
}
.jui-palace-grid-icon img {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
}
.jui-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;
}
.jui-palace-grid-text h2 {
        font-size: 0.8rem;
        font-weight: normal;
        color: #666666;
}
.m-actionsheet {
        text-align: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: #EFEFF4;
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%);
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s;
}
.mask-black {
        background-color: rgba(0, 0, 0, 0.4);
        position: fixed;
        z-index: 500;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        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;
        z-index: 998;
}
.actionsheet-action {
        display: block;
        margin-top: .15rem;
        font-size: 0.28rem;
        color: #555;
        height: 1rem;
        line-height: 1rem;
        background-color: #FFF;
}
.m-actionsheet {
        text-align: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10005;
        background-color: #ffffff;
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%);
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s;
}
.actionsheet-toggle {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
}
.actionsheet-item {
        display: block;
        position: relative;
        font-size: 0.85rem;
        color: #555;
        height: 2rem;
        line-height: 2.........完整代码请登录后点击上方下载按钮下载查看