用CSS的LI列表打造一個商品打折優惠的熱點圖_層和布局特效
很不錯的圖文列表效果，用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" mrc="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; 1122123<img src=http://p1.mb5u.com/texiao/3/20100522231324316.png _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231324316.png>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231324316.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="/jscss/demoimg/wall_s1.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="/jscss/demoimg/wall_s2.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="/jscss/demoimg/wall_s1.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="/jscss/demoimg/wall_s2.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>
。