此贴在2009-7-20 9:43:15被*听话的狗司机*编辑过
很不错的图文列表效果，用CSS的LI列表打造一个商品打折优惠的热点图文展示，很能吸引人眼球，用CSS做出来的，确实值得大家借鉴，也是比较实用的CSS布局方法。
程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS使用LI实现商品打折图文展示效果</title>
<style type="text/css">
*{ padding:0; margin:0;}
img{
display:block;
}
body{
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(
http://www.codefans.net/jscss/demoimg/200907/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;
font-weight:100;
}
.piclist li span{
text-align:center;
display:block;
height:16px;
line-height:16px;
}
</style>
</head>
<body>
<ul class="piclist">
<li><a href="/" target="_blank";><a href="/" target="_blank";><img src="
http://www.xiapiaoxue.com/zaoshi/up/uplogo/200972034431829.jpg" /></a></a>
<div class="youhui"><span>5.5折</span></div>
<h1><a href="/" class="red">精品运动鞋</a></h1>
<span>£2.01</span> </li>
<li> <a href="/" target="_blank";><img src="
http://www.xiapiaoxue.com/zaoshi/up/uplogo/200972034496049.jpg" /></a>
<div class="youhui"><span>7.6折</span></div>
<h1><a href="/" class="red">时尚内衣</a></h1>
<span>£30.8</span> </li>
<li> <a href="/" target="_blank";><img src="
http://www.xiapiaoxue.com/zaoshi/up/uplogo/200972031756641.jpg" /></a>
<div class="youhui"><span>6.6折</span></div>
<h1><a href="/" class="red">二手奔弛</a></h1>
<span>£21.7</span> </li>
<li> <a href="/" target="_blank";><img src="
http://www.xiapiaoxue.com/zaoshi/up/uplogo/200972031658797.jpg" /></a>
<div class="youhui"><span>8.5折</span></div>
<h1><a href="/" class="red">破旧宝马</a></h1>
<span>£48.8</span> </li>
</ul>
</body>
</html>
24小时新发主题 
最近被编辑的主题 
超过24小时普通主题