您的位置：首页 > 其它

SVN 精细版本控制

2015-05-22 21:09 274 查看
本页的代码是向大家展示几个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-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-image: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-image: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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航