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

全部博文(2110)

文章存档

2011年(139)

2010年(1971)

我的朋友

分类: 系统运维

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>


阅读(243) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~