看着淘宝首页的热卖单品，自己做的div css热卖单品

 先上实截图，

<!--StartFragment -->

 


 
 

 

再上css和html

<style type="text/css">
.hotsale {
 height: 432px;
 width: 1000px;
 margin-right: auto;
 margin-left: auto;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: none;
 border-left-style: solid;
 border-top-color: #d8d8d8;
 border-right-color: #d8d8d8;
 border-bottom-color: #d8d8d8;
 border-left-color: #d8d8d8;
}
.hotsale .hotsale_nav {
 background-color: #f6f6f6;
 display: block;
 line-height: 1px;
 height: 32px;
 font-size: 12px;
 float: left;
 padding-left: 12px;
 width:988px;
}
.hotsale .hotsale_nav h3 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 width: 63px;
 padding-top: 0px;
 display: block;
 float: left;
 margin-top: 14px;
 margin-right: 14px;
}
.hotsale .hotsale_nav a {
 color: #3366cc;
 text-decoration: none;
 font:12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
 margin-right: 4px;
}
.hotsale .hotsale_nav a:hover{
 color:#F63;
 text-decoration:underline; 
 }
.hotsale .hotsale_nav .hotsale_nav_items {
 font-size: 12px;
 float: left;
 height: 34px;
 margin-right: 15px;
 text-align: center;
 vertical-align: middle;
 margin-top: 4px;
}
.hotsale div ul {
 height: auto;
 width: 967px;
 border: 1px solid #60F;
 list-style-type: none;
 font-size: 12px;
 margin-right: 10px;
 padding-top: 1px;
 padding-right: 1px;
 padding-bottom: 1px;
 padding-left: 24px;
 color: #3e3e3e;
}
.hotsale .hotsale_list {
 width: 1000px;
 height: 436px;
}
.hotsale .hotsale_list ul li h4 {
 font-size: 12px;
 text-align: left;
 display: block;
 height: auto;
 width: auto;
 margin-bottom: 1px;
 margin-top: 1px;
 font-weight: normal;
}
.hotsale .hotsale_list ul li {
 float: left;
 height: 180px;
 width: 125px;
 margin-top: 5px;
 margin-right: 18px;
 margin-left: 18px;
 margin-bottom: 5px;
 display: block;
 color: #333;
}
.hotsale .hotsale_list ul li span {
 font-size: 14px;
}
.hotsale .hotsale_list ul li .yuexiao_ziti {
 background-image: url(images/taobao_hot_sale/hot_sale.jpg);
 background-repeat: no-repeat;
 background-position: left;
 padding-right: 10px;
 text-indent: 8;
}

</style>

<div class="hotsale">
    <div class="hotsale_nav">
        <h3>热卖单品</h3>
        <div class="hotsale_nav_items">
        <a href="#">钱包男</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">照片墙</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">真皮女包</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">装饰画</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">油画</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">挂钟</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">收纳箱</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">喜糖盒</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">行李箱</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">女包</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">真皮</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">无框画</a></div>
      <a style="display:block;float:left;width:54px;font-weight:bold;line-height: 1em;padding-top:8px;" href="#">更多热卖</a>
    </div>
    <div class="hotsale_list">
        <ul >
        <li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        <span class="yuexiao_ziti">月销<span style="color:#666">99</span></span>
        </li><li>
        <img src="images/tb_DIVCSS_02.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30;font-size:14px;">255.00</span><br />
        月销<span style="color:#666;font-size:14px;">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#F60">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_04.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_05.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li>
        <li>
        <img src="images/tb_DIVCSS_05.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_03.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_07.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li><li>
        <img src="images/tb_DIVCSS_01.jpg"/>
        <h4>108元抢！配牛皮大小</h4>
        <span style="color:#666">¥</span><span style="color:#C30">255.00</span><br />
        月销<span style="color:#666">99</span>
        </li>
       
      </ul>
    </div>
</div> 

注：在IE8和FF浏览器上测试过，正常。