双边框的网页图片而且鼠标经过背景变色

大中小文章来源：中国互联更新时间：2011-8-18 14:30:33

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

<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="http://www.webjx.com/" class="img" ><img src="http://www.webjx.com/files/allimg/090921/1448080.jpg" /><span>图片名称</span></a></li> <li><a href="http://www.webjx.com/" class="img" ><img src="http://www.webjx.com/files/allimg/090921/1448080.jpg" /><span>图片名称</span></a></li> <li><a href="http://www.webjx.com/" class="img" ><img src="http://www.webjx.com/files/allimg/090921/1448080.jpg" /><span>图片名称</span></a></li> </ul> </div> </body>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

版权说明:本站原创文章,由中国互联 SEO优化发表.
本文地址:https://www.hulian.top/zixun/post/4049.html

分享到：QQ空间新浪微博腾讯微博微信百度贴吧百度空间搜狐微博