要求实现如下效果图：
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background: #f7f7f7;
}
h2,h3,p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
#wrap{
width: 260px;
padding-top: 4px;
}
#wrap h2{
height: 20px;
background: url(images/title_img.gif) no-repeat;
text-indent: 99px;
font: bold 12px/17px '宋体';
color: #6c6c6c;
margin-bottom: 14px;
}
.box{
background: #fff;
border: 1px solid #e8e8e8;
}
.list{
padding: 12px 14px 16px 14px;
border-bottom: 1px solid #e8e8e8;
}
.list h3{
font: bold 12px/23px '宋体';
color: #444444;
}
.list p{
font: 12px/23px '宋体';
}
.list p a{
color: #6c6c6c;
padding: 0 6px 0 10px;
border-right: 1px solid #eaeaea;
}
.list p a.noPadding{
padding-left: 0;
}
.list p a.noBorder{
border-right: none;
}
.list ul{
font-size: 0;
padding-top: 6px;
}
.list ul li{
display: inline-block;
}
.center{
margin: 0 10px;
}
.look{
height: 33px;
padding-top: 4px;
background: #e9e9e9 url(images/ico_02.gif) no-repeat 82px 12px;
text-indent: 112px;
}
.look a{
font: 12px/33px '宋体';
color: #6c6c6c;
/*position: relative;
top: 3px;*/
}
</style>
</head>
<body>
<div id="wrap">
<h2>你可能喜欢的店铺</h2>
<div class="box">
<div class="list">
<h3>素色空间</h3>
<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
<ul>
<li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li>
<li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li>
</ul>
</div>
<div class="list">
<h3>素色空间</h3>
<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
<ul>
<li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li>
<li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li>
</ul>
</div>
<div class="list">
<h3>素色空间</h3>
<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
<ul>
<li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li>
<li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li>
</ul>
</div>
<div class="list">
<h3>素色空间</h3>
<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
<ul>
<li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li>
<li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li>
</ul>
</div>
<div class="look"><a href="#">换一组看看</a></div>
</div>
</div>
</body>
</html>