代码：仿淘宝，商品列表页

2015-1-7
http://beijing.XXXXXXX.com/shops/618_product
仿淘宝商品列表页，鼠标浮上去，商品外边有红框（能撑出红框，但是页面不会发生错位）。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache"> 
</head>
<body>
<style type="text/css">
html,body,ul,li,dl{margin:0;padding:0;}
.j02{width:906px;}
.j02 .product{width:282px;height:333px;margin-right:20px;margin-bottom:20px;}
.j02 .product:nth-of-type(3n) {margin-right:0;}
.j02 .product-box{width:1208px;margin-right:-20px;}
.j02 .iwrap img{height:210px;}

/* ******** 商品展示:图片列表 start  *********** */
/* 使用说明： 要在具体页面加下列css 
.j02 .product{282px;height:333px;margin-right:20px;margin-bottom:20px;}//图片是280x210
.j02 .product-box{1208px;margin-right:-20px;}//宽度是4个（容器+margin-right）的宽度之和
.j02 .iwrap img{height:210px;}    //限图片高度(此行可不写)    */
.product {position:relative;float:left;background:#fff;line-height:1.5;overflow:visible;z-index:1;}
.product:hover{overflow:visible;z-index:3;}
.product:hover .iwrap {
    margin:-3px;
    border:4px solid #f83760;
    -webkit-transition:border-color .2s ease-in;
    -moz-transition:border-color .2s ease-in;
    -ms-transition:border-color .2s ease-in;
    -o-transition:border-color .2s ease-in;
    transition:border-color .2s ease-in;
}
.iwrap {display:block;position:absolute;background:#fff;left:0;top:0;right:0;bottom:0;border:1px solid #ececec;box-sizing:content-box;}
.iwrap img{width:100%;margin-bottom:10px;}
.iwrap p.line1{margin-left:10px;margin-right:10px;color:#333;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.iwrap p.line2{margin-left:10px;margin-right:10px;margin-bottom:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.iwrap .line3{position:absolute;bottom:0;background:#f8f8f8;width:100%;height:56px;}
.iwrap .line3 dd{display:block;float:left;line-height:1;}
.iwrap .line3 .c1{width:35%;font-size:26px;overflow:hidden;white-space:nowrap;}
    .iwrap .rmb{display:block;float:left;font-size:16px;padding-left:0.5em;}
    .iwrap .money{display:block;float:left;}

.iwrap .line3 .c2{min-width:22%;max-width:28%;height:56px;box-sizing:border-box;overflow:hidden;text-align:center;}
    .iwrap .triangle{display:block;float:left;width:0;height:0;box-sizing:border-box;border-width:28px 14px 28px 14px;border-style:solid;border-color:#f8f8f8 #f73760 #f8f8f8 #f8f8f8; }
.iwrap .line3 .c3{width:40%;height:56px;background:#f73760;color:#fff;line-height:56px;text-align:center;float:right;cursor:pointer;}
/* ******** 商品展示:图片列表 end  *********** */
</style>
<div class="j02 main clearfix">
    <!-- 把这段代码重复copy 6次 start -->
    <div class="product">
        <a href="/shops/618_product_4578" target="_blank" class="iwrap">
            <img src="http://www.csdn.net/css/logo.png">
            <p class="f16 line1">商品1</p>
            <p class="f12 line2 red">引进了国际散热器先进技术及科研生产装备，具备年产散热器50万</p>
            <dl class="line3">
                <dd class="c2 red"><span class="rmb">￥888</span></dd>
                <dd class="c3 f16"><i class="triangle"></i>马上预订</dd>
            </dl>
        </a>
    </div>
    <!-- 把这段代码重复copy 6次  end-->
</div>
</body>
</html>
......