* {
margin:0;
padding:0;
}
ul,li {
list-style:none;
}
.clear {
clear:both;
}
.wrap {
width:1200px;
margin:50px auto;
}
.wrap .wrap_header {
width:100%;
padding:15px 10px;
box-sizing:border-box;
background:rgba(195,239,255,0.3);
}
.wrap .wrap_header h1 {
display:inline;
color:#666;
font-size:15px;
}
.wrap .wrap_header span {
display:inline-block;
padding:2px 10px;
background:#ffe4c6;
color:#f78000;
border:1px solid #ffbf7b;
font-size:12px;
border-radius:5px;
margin-right:30px;
position:relative;
}
.wrap .wrap_header span .pos {
position:absolute;
top:-1px;
right:-15px;
display:block;
width:15px;
height:100%;
background:#ff9191;
color:#fff;
text-align:center;
border:1px solid #ff9191;
border-radius:0 5px 5px 0;
cursor:pointer;
}
.wrap .contenter {
background:rgba(235,250,255,0.3);
padding:15px;
box-sizing:border-box;
}
.wrap .block {
width:100%;
float:left;
padding:15px 0;
border-bottom:1px dashed #e5e5e5;
}
.wrap .block:nth-of-type(4) {
border:none;
}
.wrap .block .title {
float:left;
color:#f78000;
font-size:15px;
margin-right:30px;
}
.wrap .block ul {
float:left;
}
.wrap .block ul li {
float:left;
font-size:13px;
color:#666;
margin-right:20px;
line-height:22px;
cursor:pointer;
}
.wrap .block ul li.one {
background:rgba(195,239,255,0.3)
}
vue写的商城产品筛选,适合初学者学习