搜索

热门标签:

用CSS制作图片双边框,滑门变色效果代码

时间:2009-04-20 11:37来源:未知
  1. <head>  
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  3. <title>CSS实现双边框的图片,鼠标经过背景变色</title>  
  4. <style>  
  5. *{   
  6.     margin:0;   
  7.     padding:0;   
  8.     list-style:none;   
  9.     font-size:14px;   
  10. }   
  11. h1{   
  12.     margin:10px;   
  13. }   
  14. img{   
  15.     border:1px solid #ccc;   
  16. }   
  17. .info li {   
  18.     padding:5px;   
  19.     width:144px;   
  20.     float:left;   
  21. }   
  22. .info li .img {   
  23.     padding:5px;   
  24.     border:1px solid #CBCBCB;   
  25.     display:block;   
  26. }   
  27. .info li .img:link,.info li .img:visited {   
  28.     border:1px solid #CBCBCB;   
  29. }   
  30. .info li .img:hover{   
  31.     border:1px solid #CBCBCB;   
  32.     background:#f0f0f0;   
  33.     color:red;   
  34. }   
  35. span{   
  36.     display:block;   
  37.     width:100%;   
  38.     clear:both;   
  39.     text-align:center;   
  40. }   
  41. </style>  
  42. </head>  
  43. <body>  
  44. <div class="info">  
  45. <ul>  
  46. <li><a href="http://www.dangbao.net" class="img" ><img src="http://i3.sinaimg.cn/book/bbs/p/2008/1110/U3093P59T75D12763F1590DT20081110163455.jpg" /><span>图片名称</span></a></li>  
  47. <li><a href="http://www.dangbao.net" class="img" ><img src="http://i3.sinaimg.cn/book/bbs/p/2008/1110/U3093P59T75D12763F1590DT20081110163455.jpg" /><span>图片名称</span></a></li>  
  48. <li><a href="http://www.dangbao.net" class="img" ><img src="http://i3.sinaimg.cn/book/bbs/p/2008/1110/U3093P59T75D12763F1590DT20081110163455.jpg" /><span>图片名称</span></a></li>  
  49. </ul>  
  50. </div>  
  51. </body>  
分享到： 更多
Dreamweaver相关文章

Powered by Gwxdn.com 联系方式：admin@gwxdn.com
2007-2012 Gwxdn.com. 跟我学电脑 网站声明
苏ICP备07026951号-3