body,ul,ui,p,h3{margin:0; padding:0;}
ul,ol{list-style: none;}
.wrapper{
	width: 938px;
	height: 128px;
	border: 1px solid #d3d3d3;
}
/*动画效果*/
.wrapper ul *{ transition:all .1s linear;}

.wrapper li{
	width: 156px;
	height: 128px;
	float: left;
	overflow: hidden; /* --#把超出部分隐藏起来 */
}

.wrapper li a{
	display: block;
	height: 128px;
	width: 156px;
	position: relative;
	overflow: hidden;
	text-decoration:none;
}
.wrapper img{       /* 我觉得应该按图片比例来 */
	position: absolute;
	bottom: 0;    /* --#实现右下角对齐，底部和右边都为0 */
	right: -15px;
	height: 50px;  /* --#定义图片大小 */
	width: 100px;
}

.wrapper .info{
	position: absolute;
	top: 0;    /* 实现文件左上角对齐，加padding为了保证文字和图片没有重叠情况 */
	left: 0;
	width:  136px;
	padding: 4px 10px;
}

.wrapper .info h3{
	font-size: 14px;
	font-weight: 700;
}

.wrapper .info p{
	color: #868686;
	font-size: 12px;
	height: 22px;
	line-height: 22px;    /* 给出高度和宽度是因为，避免字数过度与图片重叠，多余的字隐藏掉 */
	width: 13;
	overflow: hidden;
}

.wrapper .info .price {
	font-size: 14px;
	font-style: italic;
	color: #fa2a5d;
	height: 35px;
}

.wrapper .line {
	position: absolute;
	right: 0;
	width: 0;
	height: 128px;
	border: 1px dashed #cacaca;
}

.wrapper .mask {
	position: absolute;
	top: 0;
	left: 0;
	height: 128px;
	width: 156px;
	opacity: 0;
	background: #000;
}

.wrapper:hover .mask {  /* 鼠标停留改变透明度 */
	opacity: 0.15;
}

/*-----------------big-展开状态------------------*/
 .wrapper li.big, li.big a{
	width: 280px;
}

.wrapper li.big img {   //这增加的高度和宽度应该按图片比例，由于这里图片不一，就随便了
	width: 195;
	height: 80px;
	right: 0;
	bottom: 0;
}

.wrapper li.big .info{
	width: 290px;
}
.wrapper li.big h3{
	font-size: 18px;
}
.wrapper li.big p {
	font-size: 14px;
	width: 166px;
}

.wrapper li.big p.price {
	font-size: 16px;
	padding-top: 7px;
}

.wrapper li.big a:hover .mask{
	opacity: 0;    /* 根据优先级来改变透明度，这样加了big标签的遮罩层透明度不一样 */
}