css实现自适应响应式商品卡片列表效果代码-html代码-BFW代码库

css实现自适应响应式商品卡片列表效果代码

代码语言：html

所属分类：响应式

代码描述：css实现自适应响应式商品卡片列表效果代码品卡片列表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>服装颜色选择</title>
        <meta name="description" content="Neat">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
<style>
    html, body{
        min-height: 100%;
}
*{
        margin:0;
        padding:0;
        font-size: 12px;
}
ul{
        list-style:none;
}
.hide{
    display: none;
}
.lf{
        float: left;
}
.lr{
        float: right;
}
.red, .red a,.red a h5, .red a p{
    color:#FF0000 !important;
}
html{
        background: #f0efef;
}
a {
    text-decoration: none;
    color: inherit;
}

.main-group{
        max-width:1000px;
        width:100%;
        margin:30px auto;
        box-sizing: border-box;
}
.main-group .title{
        font-size: 3em;
        text-align: center;
}

.data-group{
        margin-top:4em;
        box-sizing: border-box;
        display: flex;
        flex-wrap:wrap;
}
.data-group .item-group{
        max-width: calc((100% - 6rem) / 3);
    width: calc((100% - 6rem) / 3);
        position: relative;
    margin: 1.5rem 1rem 0px;
}
.data-group .item-group a{
        color:rgb(19, 19, 21);
}
.data-group .item-group .img-group{
        width:100%;
        overflow: hidden;
        background: #fff;
        /* position: relative; */
}
/* .data-group .item-group .img-group .tem_img{
        position: absolute;
} */
.data-group .item-group .img-group img{
        transition: padding ease-out 0.2s;
        width:100%;
        box-sizing: border-box;
        padding:2em;
}
.data-group .item-group .desc-group{
        margin-top:1em;
}
.data-group .item-group .desc-group .name-color-group{
        display: flex;
        justify-content: space-between;
        align-items: center;
}
.name-color-group .name, .desc-group .price-group{
        font-size: 1.4em;
}
.name-color-group .name{
        flex:1;
        word-break:keep-all; /* 不换行 */
        white-space:nowrap; /* 不换行 */
        overflow:hidden; 
        text-overflow:ellipsis; 
}
.name-color-group .color-group{
        display: flex;
}
.name-color-group .color-group .img-grooup{
        margin-left:0.3em;
        cursor: pointer;
}
.name-color-group .color-group img{
        width:2.5em;
        height: 2.5em;
        box-sizing: border-box;
        padding:0.1em;
}
.name-color-group .img-grooup.self img{
        border:1px solid rgb(46, 46, 46);
        border-radius: 4px;
}

@media screen and (max-width: 680px){
        .data-group .item-group{
                max-width: calc((100%));
                width: calc((100%));
                position: relative;
                margin: 1.5rem 1rem 0px;
        }
}


</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
        <script>
            
            class SwitchGoods{
    constructor(parameter).........完整代码请登录后点击上方下载按钮下载查看