<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS完成神奇创意的相框</title> <style type="text/css"> *{ text-align:center; border:0; list-style:none; } body{ font-size:12px; font-family:Tahoma, Geneva, sans-serif; background:#000; } .photo{ width:404px; margin:0 auto; border-left:solid 2px #333; border-right:solid 2px #333; background:#fff; } .photo h1{ font-size:14px; color:#666; line-height:40px; } .photo ul{ margin:0; padding:0; } .photo li{ position:relative; width:400px; height:300px; overflow:hidden; } .photo li a:link span,.photo li a:visited span{ display:none; } .photo li a:hover span{ display:block; text-align:center; position:absolute; top:0; left:0; width:100%; height:100%; font-size:40px; line-height:300px; color:#f00; background:#000; filter:alpha(opacity=70); -moz-opacity: 0.; opacity: 0.7; } .magic1,.magic2,.magic3{ position:absolute; top:0; left:0; width:100%; height:100%; } .magic1{ background: url(/jscss/demoimg/200908/01.png) no-repeat; } .magic2{ background: url(/jscss/demoimg/200908/02.png) no-repeat; } .magic3{ background: url(/jscss/demoimg/200908/03.png) no-repeat; } a:link,a:visited,a:hover{ text-decoration:none; } </style> </head> <body> <div class="photo"> <h1>Magic Photo Frame 神奇创意相框</h1> <ul> <li> <a href="#"><img src="/jscss/demoimg/wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic1"> </em></a> </li> <li> <a href="#"><img src="/jscss/demoimg/wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic2"> </em></a> </li> <li> <a href="#"><img src="/jscss/demoimg/wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic3"> </em></a> </li> </ul> </div> </body> </html> |
|