注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

邰增涛博客

www.xazcwl.com -- 爱生活,爱技术,将web编程进行到底!!!

 
 
 

日志

 
 
关于我

西安增创网络科技有限公司,专注网站建设、手机网站、商城网站、微网站开发、小程序开发、APP开发!!!

{ CSS Decorative Gallery }  

2010-07-08 19:42:13|  分类: web标准 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
例1:
{ CSS Decorative Gallery } - 孤独剑客 - Atao Blog

<style type="text/css">
*{ margin:0; padding:0;}
body{ font:11px Georgia, "Times New Roman", Times, serif;}
.wapper{ margin:0 auto; padding:0; width:700px; color:black;}
a{ color:balck;}
h1{ font:normal 320%/100% Georgia, "Times New Roman", Times, serif; letter-spacing:-2px; margin:20px 0 50px 0;}
.credits{ font:120% Georgia, "Times New Roman", Times, serif; border-bottom:1px solid #ccc; padding-bottom:5px; margin:0 0 30px 0;}
.credits em{ color:#999;}
.credits a{ color:#666; text-decoration:none; text-transform:uppercase; letter-spacingh:1px; margin-left:10px;}
.credits a:hover{ color:#000;}
img{ border:none;}
.gallery{ list-style:none;}
.gallery li{ float:left; margin:10px; width:180px; height:130px; display:inline; position:relative;}
.gallery img{ background:#fff; border:1px solid #ccc; padding:4px;}
.gallery span{ width:77px; height:27px; background:url(images/tape.png) no-repeat; display:block; position:absolute; left:50px; top:-12px; color:12px; text-align:center;}
.gallery span p{ color:#ff0000; margin-top:5px;}
</style>

<div class="wapper">
 <h1>Demo | Simple Gallery</h1>
 <p class="credits"><em>by:</em><a href="#">Web Designer Wall</a></p>
 <ul class="gallery">
      <li><a href="#"><span><p>Atao</p></span><img src="images/11.jpg" alt="image" /></a></li>
   <li><a href="#"><span><p>孤独剑客</p></span><img src="images/14.jpg" alt="image" /></a></li>
   <li><a href="#"><span></span><img src="images/4.jpg" alt="image" /></a></li>
   <li><a href="#"><span></span><img src="images/7.jpg" alt="image" /></a></li>
   <li><a href="#"><span></span><img src="images/5.jpg" alt="image" /></a></li>
   <li><a href="#"><span></span><img src="images/6.jpg" alt="image" /></a></li>
   <li><a href="#"><span></span><img src="images/3.jpg" alt="image" /></a></li>
   <li><a href="#"><span></span><img src="images/1.jpg" alt="image" /></a></li>
   <li><a href="#"><span></span><img src="images/2.jpg" alt="image" /></a></li>
 </ul>
</div>

<!--解决IE6下背景透明 -->
<!--[if lt IE 7]>
<style type="text/css">
 .gallery span { behavior: url(iepngfix.htc); cursor: pointer; }   /*iepngfix.htc文件*/
</style>
<![endif]-->

例:2
{ CSS Decorative Gallery } - 孤独剑客 - Atao Blog
<!--CSS兼容:IE6不支持除a标签以外的hover属性-->
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $('.gallery img').hover(function(){
  $(this).addClass('hover');         
 },function(){
  $(this).removeClass('hover');
 });
});
</script>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font:11px Georgia, "Times New Roman", Times, serif;}
.wapper{ margin:0 auto; padding:0; width:700px; color:black;}
a{ color:balck;}
h1{ font:normal 320%/100% Georgia, "Times New Roman", Times, serif; letter-spacing:-2px; margin:20px 0 50px 0;}
.credits{ font:120% Georgia, "Times New Roman", Times, serif; border-bottom:1px solid #ccc; padding-bottom:5px; margin:0 0 30px 0;}
.credits em{ color:#999;}
.credits a{ color:#666; text-decoration:none; text-transform:uppercase; letter-spacingh:1px; margin-left:10px;}
.credits a:hover{ color:#000;}
img{ border:none;}
.gallery{ list-style:none;}
.gallery li{ float:left; margin:10px; width:180px; height:130px; display:inline; position:relative;}
.gallery img{ background:#fff; border:1px solid #ccc; padding:4px;}
.gallery a:hover img{ border-color:#666;}
.gallery span{ width:20px; height:18px;position:absolute; bottom:10px; right:10px; display:block;}
.gallery a:hover span{ background-position:0 -22px;}
.gallery .favorite{ background:url(images/favorite.gif) no-repeat;}
.gallery .photo{ background:url(images/photo.gif) no-repeat;}
.gallery .video{ background:url(images/video.gif) no-repeat;}
</style>
<div class="wapper">
 <h1>Demo | Simple Gallery</h1>
 <p class="credits"><em>by:</em><a href="#">Web Designer Wall</a></p>
 <ul class="gallery">
      <li><a href="#"><img src="images/11.jpg" alt="image" /><span class="favorite"></span></a></li>
   <li><a href="#"><img src="images/14.jpg" alt="image" /><span class="photo"></span></a></li>
   <li><a href="#"><img src="images/4.jpg" alt="image" /><span class="video"></span></a></li>
   <li><a href="#"><img src="images/7.jpg" alt="image" /><span class="photo"></span></a></li>
   <li><a href="#"><img src="images/5.jpg" alt="image" /><span class="favorite"></span></a></li>
   <li><a href="#"><img src="images/6.jpg" alt="image" /><span class="favorite"></span></a></li>
   <li><a href="#"><img src="images/3.jpg" alt="image" /><span class="photo"></span></a></li>
   <li><a href="#"><img src="images/1.jpg" alt="image" /><span class="video"></span></a></li>
   <li><a href="#"><img src="images/2.jpg" alt="image" /><span class="favorite"></span></a></li>
 </ul>
</div>
  评论这张
 
阅读(192)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018