• 本页的代码是向大家展示几个CSS3中常用的属性，综合形成一款实用的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=utf-8" />

<title>css3的几个常用属性演示实例</title>

<style type="text/css">

*{padding:0;margin:0;}

img{border:0;}

li{ list-style-type:none;}

.layout{ margin:20px auto; width:800px;}

.readers{ float:left; width:250px; }

.readers ul li{ float:left;width:250px;float:left;line-height:20px;}

.readers ul li a,.readers ul li a:hover b{font-size:12px;text-decoration:none;color:#999;background-color:f2f2f2;background-p_w_picpath:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-p_w_picpath:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-p_w_picpath:linear-gradient(#f8f8f8,#f2f2f2); background:#f6f6f6;}

.readers ul li a{position:relative;display:block;height:55px;margin:4px;padding:8px 4px 4px 44px;color:#999px;border:#ccc 1px solid;border-radius:4px;box-shadow:#eee 0 0 2px;}

.readers ul li img,.readers ul li em,.readers ul li b{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out;}

.readers ul li img{width:50px;height:50px;float:left;margin:0 8px 0 -40px;border-radius:3px;}

.readers ul li em{color:#666;font-style:normal;margin-right:10px;}

.readers ul li b{color:#ddd;width:48px;text-align:right;position:absolute;right:6px;top:4px;font:bold 14px/16px microsoft yahei;}

.readers ul li a:hover{border-color:#bbb;box-shadow:#ccc 0 0 2px;background-color:#fff;background-p_w_picpath:none;}

.readers ul li a:hover img{opacity:6px;margin-left:20px;}

.readers ul li a:hover b{color:#ee8b17;right:190px;top:10px;text-align:center;border-right:#ccc 1px solid;height:67px;line-height:67px; margin-top:-10px;}

</style>

</head>

<body>

<div class="layout">

 <div class="readers">

  <ul>

   <li><a href="#"><img src="/jscss/demoimg/wall_s2.jpg" alt="" /><em></em><b>+100</b><br />www.sjztongda.com/</a></li>

   <li><a href="#"><img src="/jscss/demoimg/wall_s2.jpg" alt="" /><em>蓝色理想</em><b>+100</b><br />www.sancaifq.com</a></li>

  </ul>

 </div>

</div>

</body>

</html>