求人帮忙写一段HTML代码，实现图中的效果
<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>列表</title>
<style?type="text/css">
ul{?padding:0;margin:0;width:650px;?}
ul?li{?list-style:none;?}
ul:after{?clear:both;content:'';display:block;height:0;?}
ul?li{?width:150px;float:left;box-sizing:border-box;border:1px?solid?#CCC;margin:5px?5px;padding:10px;?}
ul?li?img{?width:120px;height:120px;margin:10px?auto;display:block;?}
ul?li?a{?color:#666666;font-size:12px;text-decoration:underline;?}
ul?li?p{?color:#900;font-weight:bold;font-size:12px;?}
ul?li?p?span{?color:#666;font-weight:normal;?}
</style>
</head>
<body>
<ul>
<li>
<img?src="/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg"?/>
<a?href="#">这里应该是商品标题也就是图片下方文字</a>
<p>US?$?8.6<span>/set</span></p>
</li>
<li>
<img?src="/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg"?/>
<a?href="#">这里应该是商品标题也就是图片下方文字</a>
<p>US?$?8.6<span>/set</span></p>
</li>
<li>
<img?src="/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg"?/>
<a?href="#">这里应该是商品标题也就是图片下方文字</a>
<p>US?$?8.6<span>/set</span></p>
</li>
<li>
<img?src="/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg"?/>
<a?href="#">这里应该是商品标题也就是图片下方文字</a>
<p>US?$?8.6<span>/set</span></p>
</li>
<li>
<img?src="/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg"?/>
<a?href="#">这里应该是商品标题也就是图片下方文字</a>
<p>US?$?8.6<span>/set</span></p>
</li>
<li>
<img?src="/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg"?/>
<a?href="#">这里应该是商品标题也就是图片下方文字</a>
<p>US?$?8.6<span>/set</span></p>
</li>
<li>
<img?src="/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg"?/>
<a?href="#">这里应该是商品标题也就是图片下方文字</a>
<p>US?$?8.6<span>/set</span></p>
</li>
<li>
<img?src="/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg"?/>
<a?href="#">这里应该是商品标题也就是图片下方文字</a>
<p>US?$?8.6<span>/set</span></p>
</li>
</ul>
</body>
</html>