Orignal Shoes

* {
	margin:0;
	padding:0;
	font-family:"Open Sans",sans-serif;
	box-sizing:border-box;
}
body {
	background:#70a1ff;
	transition:0.6s linear;
}
.product-card {
	width:400px;
	background:#ecedef;
	padding:40px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	text-transform:uppercase;
}
.product-card h1 {
	font-size:22px;
	margin-bottom:4px;
}
.product-card p {
	font-size:13px;
	color:#bbb;
}
.product-pic {
	background-image:url("../images/1.png");
	width:100%;
	height:200px;
	background-size:cover;
	background-position:center;
	transition:0.6s linear;
}
.product-colors {
	margin-top:40px;
	display:flex;
	justify-content:center;
	/*在弹性盒对象的 
 元素中的各项周围留有空白*/
}
.product-colors span {
	width:14px;
	height:14px;
	margin:0 10px;
	border-radius:50%;
	cursor:pointer;
	/*background:red;
	*/
    /*改变鼠标指针形状*/
    position:relative;
	/*相对定位元素的定位是相对其正常位置。*/
}
.product-colors .active:after {
	content:"";
	width:22px;
	height:22px;
	border:2px solid #888888;
	position:absolute;
	border-radius:50%;
	box-sizing:border-box;
	left:-4px;
	top:-4px;
}
.product-info {
	display:flex;
	margin-top:20px;
	align-items:center;
}
.product-price {
	color:#70a1ff;
	font-size:26px;
	transition:.6s linear;
}
.product-button {
	margin-left:auto;
	color:#70a1ff;
	text-decoration:none;
	/*没有文本装饰，不加的话文字下面有下划线*/
    /*text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等*/
    border:2px solid;
	padding:8px 24px;
	border-radius:20px;
	transition:.4s linear;
}
.product-button:hover {
	transform:scale(1.06);
}
.blue {
	background:#70a1ff;
}
.red {
	background:rgba(248,165,194,1.0);
}
.yellow {
	background:#eccc68;
}
.green {
	background:#7bed9f;
}