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{width:282px;height:333px;margin-right:20px;margin-bottom:20px;}//圖片是280x210 .j02 .product-box{width: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>
......