css布局实现手机端招聘类app会员中心我的页面h5效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现手机端招聘类app会员中心我的页面h5效果代码
代码标签: 手机 端 招聘 类 app 会员中心 我的 页面 h5 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会员中心</title>
<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: #f8f8fa;
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: 92%;
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%;
left:15px;
}
.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;
margin-top:0;
padding-top:2rem;
}
.aui-navBar {
height: 44px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
z-index: 1002;
background: #f6f6f6;
}
.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;
}
.aui-flex-users{
width:65px;
height:65px;
margin-right:1rem;
}
.aui-flex-users img{
width:65px;
height:65px;
display:block;
border:2px solid #f3f3f3;
border-radius:100%;
}
.icon-address{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC+0lEQVRYR+2Xz0sVURTHv2fmRUILi8igHxpFm0CyRZtauLFFBRFkhAX5c+48ArOIFqKQFQlli4IgvBdFgggxLCwIyoVB9A9IGwkCQYuIHkI/EJ35xhUNe6hvns9nLmaWc+855zPfc86dcwVr/JE1zocYMNcMxQrGCkZVwPO8EyJy1+4XkSudnZ0votoutS/nGlRKrQNwB8AlAF9JUkS2AuhIpVLNfX19ge/7tWEYVotIr9b6YTbgOQEmk8ntQRA8E5GDJAfDMDxjgzuO0y8i5STfT09Pn0wkEi0i0kTSGGPUqgB6nlcBoBdAoYhc01q3A6AN3tbW5oyPj7eRbLWqAhgWkYpVAbTBx8bGrgNoAfANwGljzNuFVLEfISJP7UfY9bwD1tbWbkkkEn1z6ZuamjrV09PzZamUKaWKAbwEUEpyRESOaK1Ho6Y5cg16nncIQD+AIhG5nUqlWm0DRAnU2Ni4fnJyshvAWQATJCuNMYNRbKMAilLqKsl2EflBssoY8yqK8/Q9vu8rkg9IJkTkhtbalspM3S72LAmolCok+UREjpL8KSL7sknPQkHr6+sPuK77BsBm2/kiUqm1nsga0Pf9/SQHABRbOAC/jDFFy1Eu3cbzvHcicnj2/SjJY8aYDwv5XlRBpdRjAMcBnCPZBKBshQFt89wi2QHguTHmfFaA9hAOw9C1KfU873UeAHdqrUtqamo2uq7rdHV1fc8KcP7mfAJmKpkoXYwYcLnHzJxdrGC+FbTzHsmStDhTALq11p8XOQdnujjvTZJMJouCINAk76UF2+M4zjat9c3/ClhXV7fbdd3LxpjG+SBKqVI7HGitm2PApbo4VjBTF9l1pZSdiMtHRkY2DQ0NTc+3WY6CSqlhkgXGmL2Z4kf61SmlLgK4T/IjgLH5TkWkAMCO2bW/SyKywU7fJD+lQdhLVhnJR8aY6hUBtE4aGhqqHMexN7ddmZxmWP8NYCAIgguLTTD/CJBjsLybR0px3ily/dXFgLGCeayBNd8kfwC3Qa84u69+NQAAAABJRU5ErkJggg==');
}
.icon-edit{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAADFklEQVRYR+2Yz2tUVxTHv987RiJqwZ+lUip242/splTNoiAVShVBMvfcMFqxuBAV/QNcRXddtyJadBGDnXde4o+FCtJKbahQUTeR2QntwlW7K91N3pELMzIOSczkzYsu5u0G3rnnw/f7PffdO8R7/vA950MPMK9DPQULVVBVNwDYZ2ar59PIOTfhvf91PrXNmhktVtUDZjZGsi9HgxsiMthaX61WNzvnrpjZpyQv1Wq1c8PDw9lMPWYDfA7gE5L7vPcTOSBfl46NjW2dmpqaIFkH8BTA1wAui8jx+QAagOsicqgAuN3e+xdpml4AcILkGe/9D9P1mVZBM2OappmZXQ0hHMsL2KLcCjP7OYRQaa6pqrcB7BSRD98JoKp+ZmYPSDoz+4vkDgAXReTk+Pj4x/V6/VHMuYh8tOCADbiHJC3Lsj3OuRcAYp63m9kFkvsBrDezb0MIowsK2A43NDT0LAKo6koAfwDYBMDM7HgI4aeOhiRvBmeCawCuAfA7gI0kj3rvR2bLeNeHpJtwEbyrgG+Ba1r7hnKjo6MfOOcWVyqVfwvNYLVa/ZzkL3Fasyz7spm5ltz9BmBbu61JktwkuU5EvigMMMI55x7EBs65r8rl8p8t+1xUrglX8d5XW0FUNQ7MShHZXAhgHriGusUB5oUrFLBxKnkMYBnJAe/9o2ls3ULycLutC2Kxqp4DcLbR7FatVgvx2NTYiGPmtgDwInJztn2usAyqalQsHpu+N7MIofV6/XRfX9/DucIVZvHIyMjS/v7+/wAMi8h5Vd1rZndI/g9g+VyUa4lD94dEVQ8CuBE/8iTXAoi/BwBMAZC32Vp4BpMk+ZHkqZZGk2Z2r1QqpeVy+Ukn58dCMpim6Xdm9o2Z3Sd5V0RedgJVuILzhZmurhAF3zlgY/zjpemaiBzpJlD7WqoaM7tERLbO+VscX0ySZJLkqlKptGtwcPDvbkPGQ7GqepJVM0tDCKEjwHhxBzAOYFG34drWi/vpgIhMdgTYsHlDvNhkWbaqIMiXJG+JyD8zrd/7dyuv8j0FewrmVSBv/SsD9nlHrlrTCwAAAABJRU5ErkJggg==');
}
.aui-flex-box-text {
position:relative;
overflow:hidden;
}
.aui-flex-box-text span{
display:block;
border:none;
float:left;
font-size:0.8rem;
margin-right:0.4rem;
color:#666666;
}
.aui-flex-box h2{
font-size:0.95rem;
color:#333;
margin-bottom: 0.5rem;
}
.aui-purge {
position: relative;
overflow: hidden;
padding: 10px 0;
}
.aui-purge-item {
display: block;
border: none;
float: left;
width: 33.333%;
text-align: center;
position: relative;
}
.aui-purge-item h3 {
font-weight: bold;
font-size: 0.9rem;
color: #333;
padding-bottom: 0.5rem;
}
.aui-purge-item p {
color: #999;
font-size: 0.75rem;
}
.aui-arrow-text{
color:#999999;
font-size:0.7rem;
text-align: right;
padding-right: 13px;
position: relative;
}
.aui-arrow-text:after{
content: " ";
display: inline-block;
height: 8px;
width: 8px;
border-width: 2px 2px 0 0;
border-color: #9e9e9e;
border-style: solid;
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: relative;
top: -2px;
position: absolute;
top: 50%;
margin-top: -4px;
right: 2px;
border-radius:2px;
}
.aui-purge-item-icon{
width:30px;
height:30px;
margin:0 auto 0.3rem;
}
.aui-purge-item-icon img{
width:30px;
height:30px;
display:block;
border:none;
}
.aui-purge-one{
padding:20px 0;
}
.aui-purge-one .aui-purge-item{
width:25%;
padding:10px 0;
}
.aui-purge-one .aui-purge-item p{
color:#666666;
}
.aui-footer {
width: 100%;
position: relative;
z-index: 100;
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;
padding: 7px 5px 7px 5px;
background: #ffffff;
}
.aui-footer:after {
content: '';
position: absolute;
z-index: 0;
top: -1px;
left: 0;
width: 100%;
height: 1px;
border-top: 1px solid #ddd;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.aui-tabBar-item {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
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;
-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;
color: #979797;
}
.aui-tabBar-item-text {
display: inline-block;
font-size: 0.65rem;
color: #505050;
padding-top: 2px;
}
.aui-tabBar-item-active .aui-tabBar-item-text {
color: #1a8cff;
}
.icon-home {
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAIAAAD+THXTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDM1RjcxNzVENTIzMTFFOEI3Qjc4N0U1MzI4M0RGMDIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDM1RjcxNzZENTIzMTFFOEI3Qjc4N0U1MzI4M0RGMDIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MzVGNzE3M0Q1MjMxMUU4QjdCNzg3RTUzMjgzREYwMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MzVGNzE3NEQ1MjMxMUU4QjdCNzg3RTUzMjgzREYwMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqplK7AAAAl5SURBVHja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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0