<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>像册方式展现字母表——</title> <style type="text/css"> body{ margin:0; padding:0; text-align:left;} #container {font-family:"courier new", monospace; position:relative; width:530px; height:300px; margin:100px auto; background:#f9f9f9;border:1px dotted #cccccc;text-align:left;} #tabl a:visited, #tabl a {text-decoration:none; color:#666; font-weight:bold;float:left; padding:6px 8px;} #tabl a span {display:none;} #tabl a:hover {text-decoration:none; color:#c00; background:#fff;font-weight:bold;} #tabl a:hover .sym {display:block; width:150px; position:absolute; top:60px; left:340px; font-size:150px; font-weight:bold;color:#c00; text-align:left; border:1px solid #999; background:#fff;} #tabl a:hover .cod {display:block; width:150px; position:absolute; top:0; left:340px; font-size:20px; font-weight:bold; background:#fff; color:#080; text-align:left; border:1px solid #999;} #tabl a:hover .web {display:block; width:150px; position:absolute; top:30px; left:340px; font-size:20px; font-weight:bold; background:#fff; color:#008; text-align:left; border:1px solid #999;} #tabl a:hover .des {display:block; width:150px; position:absolute; top:240px; left:340px; font-size:16px; font-weight:bold; background:#fff; color:#000; text-align:left; border:1px solid #999;} #tabl {width:290px; position:relative; top:10px; left:10px;right:10px;} </style> </head> <body> <div id="container"> <div id="tabl"> <a href="#"> <span class="sym"></span><span class="cod">&#032;</span><span class="web"></span><span class="des">space</span></a> <a href="#">!<span class="sym">!</span><span class="cod">&#033;</span><span class="web"></span><span class="des">exclamation point</span></a> <a href="#">"<span class="sym">"</span><span class="cod">&#034;</span><span class="web">&quot;</span><span class="des">quotation mark</span></a> <a href="#">#<span class="sym">#</span><span class="cod">&#035;</span><span class="web"></span><span class="des">hash mark</span></a> <a href="#">$<span class="sym">$</span><span class="cod">&#036;</span><span class="web"></span><span class="des">dollar sign</span></a> <a href="#">%<span class="sym">%</span><span class="cod">&#037;</span><span class="web"></span><span class="des">percent sign</span></a> <a href="#">&<span class="sym">&</span><span class="cod">&#038;</span><span class="web">&amp;</span><span class="des">ampersand</span></a> <a href="#">'<span class="sym">'</span><span class="cod">&#039;</span><span class="web"></span><span class="des">apostrophe</span></a> <a href="#">(<span class="sym">(</span><span class="cod">&#040;</span><span class="web"></span><span class="des">left parenthesis</span></a> <a href="#">)<span class="sym">)</span><span class="cod">&#041;</span><span class="web"></span><span class="des"&g</body></html>
评论加载中....
评论加载中....