以下是程序代码

</p> <p>   </p> <style type="text/css"> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 50%; background-color: white; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 3%; left: 10%; width: 80%; height: 90%; padding:0 16px; border: 1px solid orange; background-color: white; z-index:1002; overflow: auto; margin:6px; } .qpshcom{ width:500px; height:200px; background-color:#efefef; color:#666666; border-width:1px; border-color:#cccccc; border-style:solid; margin:6px; padding:6px; font-Size:14px; line-height:200%; float:midden; } .qp,.qp a{ width:100%; height:18px; text-decoration:none; padding:0; margin:2px -10px 0 0; }</style> <p>   </p> <p><meta content="text/html; charset=gb2312" http-equiv="Content-Type" /></p> <p class="qpshcom"> “Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多js版本的介绍。不过都下载一个lightbox的js小则几十K，大则上百K。如果你只是需要一个类似Lightbox的效果，这种百分之百纯CSS制造，不含js的办法绝对值得你试试。点下图看效果：<br /> <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img border="0" height="63" src="//img.netblog.site/shejitu.png" width="120" /></a> </p> <div class="white_content" id="light"> <p align="right" class="qp"> <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a> </p> <p> <img border="0" height="90%" src="//img.netblog.site/shejitu.png" width="99%" /> </p> </div> <div class="black_overlay" id="fade">   </div> <p>

提示：可以先修改部分代码再运行