css布局实现一个简约手机服饰女装电商购物商场页面代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现一个简约手机服饰女装电商购物商场页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<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"/>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.min.css">
    <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: #f7f7f7;
    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;
}

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: #f5f7fc;
    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-arrow {
    position: relative;
    padding-right: 0.8rem;
    color: #7f8699;
    font-size: 0.85rem;
}

.aui-arrow span {
    font-size: 0.8rem;
    color: #9b9b9b;
}

.aui-arrow:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #848484;
    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: -6px;
    right: 2px;
    border-radius: 1px;
}

.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;
    padding-bottom: 53px;
}

.aui-navBar {
    height: 44px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 102;
    background: #fff;
}

.aui-navBar-item {
    height: 44px;
    min-width: 15%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 15%;
    -ms-flex: 0 0 15%;
    flex: 0 0 15%;
    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;
    font-size: 14px;
    color: #333333;
}

.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: 80%;
    margin-left: 22%;
}

.aui-center-title {
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    color: #333;
    font-weight: bold;
}

.icon {
    width: 19px;
    height: 19px;
    display: block;
    border: none;
    float: left;
    background-size: 19px;
    background-repeat: no-repeat;
}

.aui-flex-box h1 {
    color: #303741;
    font-weight: 500;
    font-size: 1rem;
    overflow: hidden;
}

.aui-flex-box h2 {
    color: #303741;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 0.8rem;
}

.aui-flex-box p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
    color: #676767;
}

.aui-flex-box h3 {
    font-size: 0.9rem;
    color: #8a8a8a;
    font-weight: normal;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.aui-palace {
    padding: 0.4rem 0.8rem;
    position: relative;
    overflow: hidden;
    background: white;
}

.aui-palace-grid {
    position: relative;
    float: left;
    padding: 1px;
    width: 25%;
    box-sizing: border-box;
    margin: 10px 0;
}
.aui-palace-grid-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.aui-palace-grid img {
    width: 100%;
    margin: 0 auto;
}

.aui-palace-grid p {
    text-align: center;
    font-size: 12px;
    color: #919191;
}

.aui-palace-grid-text {
    display: block;
    text-align: center;
    color: #333;
    font-size: 0.95rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-top: 0.3rem;
}

.aui-palace-grid-text h2 {
    font-size: 0.9rem;
    font-weight: normal;
    color: #333;
}



.m-slider {
    overflow-x: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.slider-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 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;
    border:1px solid #fff;
    display: inline-block;
    background:none;
    border-radius:100px;
}

.slider-pagination > .slider-pagination-item.slider-pagination-item-active {
    background-color: #ba2930;
    border-color:#ba2930;
}



.aui-books{
    padding:15px 6px;
    background:white;
}


.aui-books .aui-flex-box{
    padding:0 5px;
}


.aui-search{
    background-color:rgba(255,255,255,0.8);
    width:80%;
    position:absolute;
    left:50%;
    margin-left:-40%;
    top:8px;
    z-index:2;
    border-radius:100px;
    height:32px;
    padding-left:30px;
}

.aui-search input{
    border:none;
    background:none;
    width:90%;
    height:32px;
    line-height:32px;
    font-size:14px;
}


.aui-titles{
    height:255px;
    background:#fff;
    overflow:hidden;
    border:1px solid #e1e1e1;
}

.aui-titles h3{
    padding-left:20px;

    color:#333333 !important;
    font-size:14px !important;
    height:33px !important;
    line-height:33px;
    display:block;
    width: 100%;

    text-align:left;
}



.aui-titles h4{
    padding-left:20px;

    text-align:left;
    width: 100%;
    color:#fc5051 !important;
    font-size:19px !important;
    height:33px !important;
    line-height:33px;
    display:block;
    font-weight:normal;
}


.aui-titles h4 em{
    font-style:normal;
    font-size:14px;
}

.aui-flex-pd {
    padding:0 8px 15px 8px;
}

.aui-flex-pd .aui-flex-box{
    padding:0 5px;
}

.aui-text-box{
    padding-top:15px;
    width:100%;
    background:white;
    text-align:center;
    font-size:18px;
    color:#383838;
    height:52px;
}

.aui-text-box h2{
    width:90px;
    margin:0 auto;
    background:white;
    text-align:center;
    font-size:16px;
    color:#383838;
    font-weight:normal;
    line-height: 1;
}


.icon-search{
    position:absolute;
    left:10px;
    top:7px;
    background-size:18px;
    background-image:url('data:image/png;base64,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');
}


.icon-more{
    background-image:url('data:image/png;base64,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');
    background-size:16px;
    float:right;
    width: 18px;
    height: 18px;
}




.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: #fefefe;
}

.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;
    position: relative;
}

.aui-tabBar-item-text {
    display: inline-block;
    font-size: 0.65rem;
    color: #7d7d7d;
    padding-top: 2px;
}

.aui-tabBar-item-active .aui-tabBar-item-text {
    color: #f02929;
}
.aui-footer-fixed:after{
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #e6e6e6;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}


.icon-home{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUY4Mzg1ODQ5MDdBMTFFQjgzNDRGMTNBQzY2RjA4NDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUY4Mzg1ODU5MDdBMTFFQjgzNDRGMTNBQzY2RjA4NDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRjgzODU4MjkwN0ExMUVCODM0NEYxM0FDNjZGMDg0NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRjgzODU4MzkwN0ExMUVCODM0NEYxM0FDNjZGMDg0NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Phc94mcAAAalSURBVHja7J15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');

}

.icon-class{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODQyNzE4QTc5MDc5MTFFQjgzNDRGMTNBQzY2RjA4NDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODQyNzE4QTg5MDc5MTFFQjgzNDRGMTNBQzY2RjA4NDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4NDI3MThBNTkwNzkxMUVCODM0NEYxM0FDNjZGMDg0NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4NDI3MThBNjkwNzkxMUVCODM0NEYxM0FDNjZGMDg0NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps6Kqx4AAAmjSURBVHja7F0HjFRFGJ7jEJBuAzECgooSARsQpQmIKIgggjVYYolGQRHCKomiYqQsFhQbimhE7IgoKhbU2IOdEAtFTxAVUNGTciBwfp9vLrd37O7MFt7OPP4v+bKBm7c7//velH/ezP8XlZeXK0F0UUNuQbRR07ZgLBbrjI/eYCfwEHCvTK7PA7aA68BvwU/AN8HlIfxuD7AX2BE8SNsdZsMoA38Dl4Afg6+Dv1T8MR6Pp724yNRFQ9ju+BgJ9gfrOPRw/gk+Bd4FrtgF398PvEY/1Hs4ZDfFnQVOA1dnLTCErYePW8CrHTOwOv4Ax4IP5+n79tYPzQWO974l4CgIPDdjgSEujXwWPNGj4WYqOBrckcN3cOh5BjzGE5u3gTdC5EnWAkPcuviYr8cd38CWNyrLa5uBb4DtPLT7Wog81XYWPdlTcf83FByWxXXF4IOeiktMQsPsY2zBKDQIHy947j79Ch4HrszgmovBRzz3iL4HO6MllyZtwRCXLs91EfCNm+mx2Bb7gjdHwOU9DLwsZQuGwCfj4zX+n+Xgvkz7aEUhVJ6VbAy2sixPv/HYRH8xT623TLtkW0O0mw9gc8vy39FfRyvemGyh43TLSr/FmZtecPg3REM5+TuB442e7abD/tp/fcJQjnUfYFmH2Xp+Qvdkewh2V4yd9fUaxERtVzq00R7A+8kE7mLxo6+Cg/GEbE3o2sPqgjaBc8DPwIXgwYby3S0EZq/Q0+K3p4NXFKjrpd2PgYvBBeB+acpyeO2YKHCNamOXaUFhRKK4BcJP4LiEJzwVDrX4LnZ9DQ1lVuvfKzS+AO+wKHd0KjeptuHCLyHuD45MKN4D1xrK7KPMa+UttIuUDgssfissLNTzAJNNSQU2tYhSh2aMG8B/DGVqWngEtS1+a71DdrMuGw1l6pgWOtJNSFxBUUR/Kx91Kc9WYIGHEIFFYIEILBCBBSKwQAQWiMACEVgEFojAAhFYIAILRGCBCCwQgUVggQgsEIEFIrBABBaIwAIRWCACi8BV4FLEtHKL+hSJvFUFNt2Qug7Ve08VHKtMh22OPZQFF9h0avDYWCx2oCP1ZogG01lZxtH6VwSuxBpDWZ5LjUPk4gLXuSk43qLHWaEEVQT+xKL8ueAsiNwODHuM46k5hh.........完整代码请登录后点击上方下载按钮下载查看