原文地址：http://blog.csdn.net/he20101020/article/details/17212395
css:
[css] view plain copy #md-large-widget-content hover img { box-shadow: 6px 6px 6px rgba(0,0,0,0.3); } .ct-coll-item a.ct-coll-thumb:hover img{ box-shadow: 6px 6px 6px rgba(0,0,0,0.3); opacity: 0.9; } html:
[html] view plain copy <div class="ct-coll-item"> <a class="ct-coll-thumb" href="###"> <img src="image/a.jpg"/> </a> </div> 在网上看到一个左右移动的css效果挺不错的，记录下：
css：
[css] view plain copy /**左右移动样式start*/ .ct-post-nav{ clear:both; padding-top:30px; margin-top:20px; border-top: 1px solid whiteSmoke; } .ct-post-nav a img, .ct-post-nav a:hover img{ margin: 0px 10px 0px 0px; width: 50px; } .ct-post-nav .ct-post-prev a img{ margin: 0px 10px 0px 0px; float: left; } .ct-post-nav .ct-post-next a img{ margin: 0px 0px 0px 10px; float: right; } .ct-post-nav div{ display:block; width:245px; position:relative; font-size:14px; color: #999; } .ct-post-nav div strong{ color: #BBB; text-transform: uppercase; font-size: 11px; } .ct-post-nav div a{ display:block; } .ct-post-nav div.ct-post-prev{ float:left; padding-left:40px; } .ct-post-nav div.ct-post-next{ float:right; text-align:right; padding-right:40px; } .ct-post-nav div a:after{ position:absolute; color:#F4F5F7; font-size:56px; font-weight: normal; margin-top:-11px; height:22px; line-height:22px; top:55%; } .ct-post-nav .ct-post-prev a:after{ content: '«'; left:0px; } .ct-post-nav .ct-post-next a:after{ content: '»'; right:0px; } .ct-post-nav div:hover a:after{ color:#54829B; } .ct-post-nav div:hover a{ color:#333; } /**左右移动样式end*/ html:
[html] view plain copy <!--左右移动样式html start--> <div class="ct-post-nav"> <div class="ct-post-prev"> <a></a> </div> <div class="ct-post-next"> <a></a> </div> </div> <!--左右移动样式html end--> 一个before after在样式中的用法：
[css] view plain copy /**测试before的使用 当然还有after*/ .icon-right:before { content: "abcdefg"; } html：
[html] view plain copy <!--测试before的使用--> <p> <span class="arrowIcon icon-right">xx</span> </p>
