日期:2014-05-17  浏览次数:20983 次

看着淘宝首页的热卖单品,自己做的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_0