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

John's Blog

天空,有梦就可以飞翔!

 
 
 

日志

 
 
关于我

刚走出校园的毕业生,就读计算机网络专业,对网站建设有一定的基础。开始探求Drupal已有一段时间,对Drupal的发展很是看好。现就职于深圳慧衡科技有限公司(intematrix.cn),它是一家专门服务于中国及海外中小企业的网络营销分析和优化服务提供商。 QQ交流群:44581272

网易考拉推荐

用css调控图片大小效果  

2009-03-14 22:14:09|  分类: 图片特效 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

演示效果见:http://mydrupal.aijian.net/

 代码如下:

   
<style>

 
 h1, h2{
  font-size:180%;
  font-weight:normal;
  color:#555;
 }
 h2{
  font-size:140%;
 } 
 p{
  margin:1em 0;
 }
 p.text{
  width:500px;
 } 
 a{
  color:#f20;
  text-decoration:none;
 }
 a:hover{
  color:#999;
 }

 
 img{
  border:4px solid #333300;

 }
 ul#thumbs, ul#thumbs li{
  margin:0;
  padding:0;
  list-style:none;
 }
 
 ul#thumbs li{
  float:left;
  margin-right:35px;
  margin-bottom:25px;
  font:bold 0.8em Arial, Helvetica, sans-serif;
  color:#333333;
  border:1px solid #999; 
  padding:2px;
 }
 ul#thumbs a{
  display:block;
  float:left;
  width:200px;
  height:200px;
  line-height:300px;
  overflow:hidden;
  position:relative;
  z-index:1;  
 }
 ul#thumbs a img{
  float:left;
  position:absolute;
  top:-20px;
  left:-50px; 
  
 }

  ul#thumbs a:hover{
   overflow:visible;
   z-index:1000;
   border:none;  
  }
  ul#thumbs a:hover img{
   border:5px solid #999; 
   background:#fff;
   padding:2px;   
  } 
 
 ul#thumbs:after, li#thumbs:after{
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
  }
  ul#thumbs, li#thumbs{
   display:block;
  }
  ul#thumbs, li#thumbs{
   min-height:1%;
  }
  * html ul#thumbs, * html li#thumbs{
   height:1%;
  }

 p.thumb{
  float:left;
  margin:.5em 0;
  margin-right:10px;
  border:1px solid #999; 
  padding:2px;
 }
 p.thumb a{
  display:block;
  float:left;
  width:100px;
  height:100px;
  line-height:100px;
  overflow:hidden;
  position:relative;
  z-index:1; 
 } 
 p.thumb a img{
  float:left;
  position:absolute;
  top:-20px;
  left:-50px; 
 }
 
 /* mouse over */
 
  p.thumb a:hover{
   overflow:visible;
   z-index:1000;
   border:none;  
  }
  p.thumb a:hover img{
   border:1px solid #999; 
   background:#fff;
   padding:2px;   
  } 
</style>
</head>
<body>
 

 <ul id="thumbs">
 <li><a href="http://mydrupal.aijian.net/node/22"><img src="/sites/default/files/n/screenshot_14_preview.png" alt="" />图片六</a></li>
 <li><a href="http://mydrupal.aijian.net/node/23"><img src="/sites/default/files/n//screen_preview.png" /></a></li>
 <li><a href="http://mydrupal.aijian.net/node/24"><img src="/sites/default/files/n/amadou-drupal-screenshot_preview.png" /></a></li>
 <li><a href="http://mydrupal.aijian.net/node/25"><img src="/sites/default/files/n/amity_island_screenshot_0.png" /></a></li>
 <li><a href="http://mydrupal.aijian.net/node/26"><img src="/sites/default/files/n/screenshot_analytic_big_0_preview.png" /></a></li>
    <li><a href="http://mydrupal.aijian.net/node/27"><img src="/sites/default/files/n/barlow-screenshot.png" /></a></li>
 <li><a href="http://mydrupal.aijian.net/node/33"><img src="/sites/default/files/n/thumbnail_4.png" /></a></li>
 <li><a href="http://mydrupal.aijian.net/node/18"><img src="/sites/default/files/n/screenshot_12_preview.png" /></a></li>
 <li><a href="http://mydrupal.aijian.net/node/20"><img src="/sites/default/files/n/oxidation_screenshot_preview.png" /></a></li>
 <li><a href="http://mydrupal.aijian.net/node/21"><img src="/sites/default/files/n/fixed-screenshot_preview.png" /></a></li>
 <li><a href="http://mydrupal.aijian.net/node/28"><img src="/sites/default/files/BlueLake_0.png" /></a></li>
 </ul>
 
 


</body>
</html>

  评论这张
 
阅读(490)| 评论(1)
推荐 转载

历史上的今天

评论

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

页脚

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