CSS实现双边框的图片,鼠标经过背景变色。
<head> <meta http-equiv="Content-Type" content="text/<a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a>; 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.itjxue.com/" class="img" ><img src="http://www.itjxue.com/files/allimg/090921/1448080.jpg" /><span>图片名称</span></a></li> <li><a href="http://www.itjxue.com/" class="img" ><img src="http://www.itjxue.com/files/allimg/090921/1448080.jpg" /><span>图片名称</span></a></li> <li><a href="http://www.itjxue.com/" class="img" ><img src="http://www.itjxue.com/files/allimg/090921/1448080.jpg" /><span>图片名称</span></a></li> </ul> </div> </body>
[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]