Chinaunix首页 | 论坛 | 博客

相濡以沫onlyzq.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

onlyzq

  • 博客访问： 2547641
  • 博文数量： 2110
  • 博客积分： 18861
  • 博客等级： 上将
  • 技术积分： 24420
  • 用 户 组： 普通用户
  • 注册时间： 2008-04-05 18:23
文章分类

全部博文（2110）

文章存档

2011年（139）

2010年（1971）

我的朋友
最近访客
推荐博文
相关博文
利用CSS制作图片双边框,滑门变色效果。

分类： 系统运维

2010-01-22 23:05:52

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实现双边框的图片,鼠标经过背景变色</title>
<style>
*{
    margin:0;
    padding:0;
    list-style:none;
    font-size:14px;
}
h1{
    margin:10px;
}
img{
    border:1px solid #ccc;
}
.info li {
    padding:5px;
    width:144px;
    float:left;
}
.info li .img {
    padding:5px;
    border:1px solid #CBCBCB;
    display:block;
}
.info li .img:link,.info li .img:visited {
    border:1px solid #CBCBCB;
}
.info li .img:hover{
    border:1px solid #CBCBCB;
    background:#f0f0f0;
    color:red;
}
span{
    display:block;
    width:100%;
    clear:both;
    text-align:center;
}
</style>
</head>
<body>
<div class="info">
<ul>
<li><a href="" class="img" ><img src="" /><span>图片名称</span></a></li>
<li><a href="" class="img" ><img src="" /><span>图片名称</span></a></li>
<li><a href="" class="img" ><img src="" /><span>图片名称</span></a></li>
</ul>
</div>
</body>


阅读(240) | 评论(0) | 转发(0) |
0

上一篇：利用CSS制作图片双边框,滑门变色效果。

下一篇：IE7,6与Fireofx的CSS兼容性处理方法大全。

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6