SOURCE

<!-- 商品页面 -->
<div class="categoryPageDiv">
    <!-- 总商品集合 -->
    <div class="categoryProducts">
        <!-- 每一个商品 unit 单位-->
        <div class="productUnit" price="792.2">
            <!-- 单个商品框架 -->
            <div class="productUnitFrame">
                <a href="nowhere"><img class="productImage" width="100px;" src="http://how2j.cn/tmall/img/productSingle_middle/7058.jpg"></a>
                <span class="productPrice">￥799.20</span>
                <a href="nowhere" class="productLink">MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</a>
                <a href="nowhere" class="tmallLink">天猫专卖</a>
                <!-- div*1-->
                <!-- table也是一种方法 记得加border-collapse:collapse，border无间隔 -->
                <table class="productUnitFooter" >
                    <tbody>
                        <tr>
                            <td>月成交<strong style="color:#B57C5B">16笔</strong></td>
                            <td>评价<strong style="color:#38B">14</strong></td>
                            <td><a href="#nowhere" class="wangwangLink"><img src="http://how2j.cn/tmall/img/site/wangwang.png"></a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 复制上面-->   
        <!-- 每一个商品 unit 单位-->
        <div class="productUnit" price="792.2">
            <!-- 单个商品框架 -->
            <div class="productUnitFrame">
                <a href="nowhere"><img class="productImage" width="100px;" src="http://how2j.cn/tmall/img/productSingle_middle/7058.jpg"></a>
                <span class="productPrice">￥799.20</span>
                <a href="nowhere" class="productLink">MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</a>
                <a href="nowhere" class="tmallLink">天猫专卖</a>
                <!-- div*1-->
                <!-- table也是一种方法 记得加border-collapse:collapse，border无间隔 -->
                <table class="productUnitFooter" >
                    <tbody>
                        <tr>
                            <td>月成交<strong style="color:#B57C5B">16笔</strong></td>
                            <td>评价<strong style="color:#38B">14</strong></td>
                            <td><a href="#nowhere" class="wangwangLink"><img src="http://how2j.cn/tmall/img/site/wangwang.png"></a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    <!-- 复制上面-->
      
      
    </div>
</div>

div.categoryPageDiv {
  font-size: 12px;
  font-family: Arial;
  padding:10px auto;
}

div.categoryProducts {
  max-width:1013px;
}

div.productUnit {
  display:inline-block;
  border:3px solid transparent;/*两个border*/
  float:left;
  margin: 10px;
}

div.productUnitFrame {
  border:1px solid #EEE;/*两个border*/
  width: 220px;
}

div.productUnitFrame img.productImage {
  width:210px;
}

div.productUnitFrame span.productPrice {
  display:block;
  font-size: 1.5em;
  color: #CC0000;
}

div.productUnitFrame a {
  display:block;
  padding:2px;
}

div.productUnitFrame a.productLink {
  color:black;
  margin:10px 0px;
}

div.productUnitFrame a.tmallLink {
  color:#999;
  text-decoration:underline;
}

div.productUnitFrame a:hover {
  color:#C40000;
}

/*用table也可以,td要设置宽度，总共220px,前两个100px，最后一个20px*/
div.productUnitFrame table.productUnitFooter {
  border-collapse:collapse;
}

div.productUnitFrame table.productUnitFooter td {
  border:1px solid #EEE;
  color:#999;
  padding:5px;
  width:100px;
}

div.productUnitFrame table.productUnitFooter td strong {
  font-size:11px;
}

div.productUnitFrame table.productUnitFooter td:nth-of-type(3) {
  width:13px;
  border-right-width:0;
}


/*div边框点击未解决（出现抖动走位），只能看how2j官方的了*/
/*自己解决的，hover的border与开始设置的border一定相同*/
/*外层用transparent，内层用color,两个border解决，既能看起来边框合适，又能解决hover时的防抖和错位*/
div.productUnit:hover {

  border:3px solid #C40000;
}

div.productUnitFrame:hover {
  border:1px solid #C40001;
}