HTML图片链接样式,css给图片加双边框 链接下面文字样式变化

截图3为跟随图片下的文字进行鼠标滑动时的样式显示，文字在图片正下方切居中显示，鼠标滑动时变为红色。

CSS实现双边框的图片,鼠标经过背景变色

*{margin:0;padding:0;font-size:14px; font-family:Arial, Helvetica,

sans-serif,"宋体"; list-style:none;}

img{border:1px solid #ccc;}

p{padding:5px; text-align:center;}

.lifo{}

.lifo

li{padding:5px;width:150px;float:left;margin-right:10px;*margin-right:0px;display:inline;}

.lifo li .img{padding:5px;border:1px solid

#cbcbcb;display:block;width:150px;height:150px;}

.lifo li .img:link ,.lifo li .img:visited{border:1px solid

#cbcbcb;}

.lifo li .img:hover{border:1px solid

#cbcbcb;background:#f0f0f0;}

.lifo li .text{text-align:center;color:#09F;padding:5px;}

.lifo li .text:hover{cursor:pointer;color:#F00;

text-decoration:underline;}

• class="img" >

  width="150" height="150"

  />

  href="#"

  class="text">贺春香

• class="img" >

  width="150" height="150"

  />

  href="#"

  class="text">贺春香

• class="img" >

  width="150" height="150"

  />

  href="#"

  class="text">贺春香

• class="img" >

  width="150" height="150"

  />

  href="#"

  class="text">贺春香