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) {
        this._box = $('.'+parameter.box_class);
        this._color_group = $('.color-group');
        this.add_event();
    }
    
    add_event(){
        this._box.find('.img-group').hover(function(){
            let this_img = $(this).find('img');
            this_img.css('padding', 0);
        }, function(){
            let this_img = $(this).find('img');
            this_img.css('padding', '2em');
        })
        this._color_group.find('.img-grooup').click(function(){
            let this_class_name = $(this).attr('class');
            if(this_class_name.indexOf('self') < 0){
                //显示为当前时，不操作
                let this_m_img = $(this).attr('data-m-img');
                $(this).parents('.color-group').find('.img-grooup').removeClass('self');
                $(this).addClass('self');
                $(this).parents('.item-group').find('.img-group .goods-img').attr('src', this_m_img);
            }
        });
    }
}
	</script>
</head>
<body>

	<div class="main-group">
		<h2 class="title">
			推荐商品
		</h2>
		<div class="data-group">
			<div class=".........完整代码请登录后点击上方下载按钮下载查看