写了个非常不错的效果，适合打折购物类的网站，不看后悔一辈子！

   今天晚上用完膳上来，看到QQ上一个网友看到人家一个网站上有一个商品优惠的效果挺不错的，就在群里问，偶也是刚吃晚饭上来，暂时没事做就帮他写了，其实这效果没啥技术含量，简单的Li列表和定位就搞定了的，发个效果PP大家看看吧：
下，其实这效果没啥技术含量，简单的Li列表和定位就搞定了的，发个效果PP大家看看吧：

点击看一下效果吧：预览效果：http://www.fuguojian.com/blog/123/youhui/index.html
做这效果前，得先准备一下，在Photoshop里面做一个这样的透明圆形锯齿图片
(在PS里面导出的时候记住要选择PNG-8格式的)：

这张是没阴影的


这张是有阴影的

代码如下：
<style type="text/css">
*{ padding:0; margin:0;}
img{
display:block;
}
body{
font-family:"宋体";
color:#333;
font-size:12px;
}
a{
text-decoration:none;
}
a.red:link, a.red:visited{
color:#f00;
}
a.red:hover{
color:#a90116;
text-decoration:underline;
}
.piclist{
width:532px;
height:246px;
margin:10% auto 0 auto;
list-style:none;
}
.piclist li{
float:left;
width:96px;
height:122px;
display:block;
margin-left:10px;
position:relative;
}
/*优惠按钮开始咯*/
.piclist li .youhui{
position:absolute;
left:58px;
top:44px;
width:46px;
height:46px;
overflow:hidden;
background:url(images/youhui.png) no-repeat center;
}
.youhui span{
height:16px;
padding-top:22px;
width:46px;
text-align:center;
color:#D5042E;
}
/*优惠按钮结束咯*/
.piclist li img{
width:90px;
height:72px;
text-align:center;
padding:2px;
border:1px #ccc solid;
background-color:#fff;
margin:0px auto 0 auto;
}
.piclist li h1{
font-size:12px;
text-align:center;
padding-top:10px;
height:16px;
line-height:16px;
}
.piclist li span{
text-align:center;
display:block;
height:16px;
line-height:16px;
}
</style>





OK，看了老半天了，不提供给大家下载我也不好意思啦，呵呵

下面我更新了，此处是绝对可以下载的地址了，希望大家用在购物类的网站上面很不错的，我在www.sqmai.com上面已经用上了
下载：
     

不错不错

有演示网址看么？

很好啊 很强大·

不错不错

不提供给大家下载我也不好意思啦，呵呵