<!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>像册方式展现字母表——knowsky.Com</title>
<style type="text/css">
body{ margin:0; padding:0; text-align:center;}
#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:center; 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:center; 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:#008text-align:center; 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:center; 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">right parenthesis</span></a>
<a href="#">*<span class="sym">*</span><span class="cod">&#042;</span><span class="web"></span><span class="des">asterisk</span></a>
<a href="#">+<span class="sym">+</span><span class="cod">&#043;</span><span class="web"></span><span class="des">plus sign</span></a>
<a href="#">,<span class="sym">,</span><span class="cod">&#044;</span><span class="web"></span><span class="des">comma</span></a>
<a href="#">-<span class="sym">-</span><span class="cod">&#045;</span><span class="web"></span><span class="des">hyphen</span></a>
<a href="#">.<span class="sym">.</span><span class="cod">&#046;</span><span class="web"></span><span class="des">period</span></a>
<a href="#">/<span class="sym">/</span><span class="cod">&#047;</span><span class="web"></span><span class="des">slash</span></a>
<a href="#">0<span class="sym">0</span><span class="cod">&#048;</span><span class="web"></span><span class="des"></span></a>
<a href="#">1<span class="sym">1</span><span class="cod">&#049;</span><span class="web"></span><span class="des"></span></a>
<a href="#">2<span class="sym">2</span><span class="cod">&#050;</span><span class="web"></span><span class="des"></span></a>
<a href="#">3<span class="sym">3</span><span class="cod">&#051;</span><span class="web"></span><span class="des"></span></a>
<a href="#">4<span class="sym">4</span><span class="cod">&#052;</span><span class="web"></span><span class="des"></span></a>
<a href="#">5<span class="sym">5</span><span class="cod">&#053;</span><span class="web"></span><span class="des"></span></a>
<a href="#">6<span class="sym">6</span><span class="cod">&#054;</span><span class="web"></span><span class="des"></span></a>
<a href="#">7<span class="sym">7</span><span class="cod">&#055;</span><span class="web"></span><span class="des"></span></a>
<a href="#">8<span class="sym">8</span><span class="cod">&#056;</span><span class="web"></span><span class="des"></span></a>
<a href="#">9<span class="sym">9</span><span class="cod">&#057;</span><span class="web"></span><span class="des"></span></a>
<a href="#">:<span class="sym">:</span><span class="cod">&#058;</span><span class="web"></span><span class="des">colon</span></a>
<a href="#">;<span class="sym">;</span><span class="cod">&#059;</span><span class="web"></span><span class="des">semicolon</span></a>
<a href="#"><<span class="sym"><</span><span class="cod">&#060;</span><span class="web">&lt;</span><span class="des">less than</span></a>
<a href="#">=<span class="sym">=</span><span class="cod">&#061;</span><span class="web"></span><span class="des">equal sign</span></a>
<a href="#">><span class="sym">></span><span class="cod">&#062;</span><span class="web">&gt;</span><span class="des">greater than</span></a>
<a href="#">?<span class="sym">?</span><span class="cod">&#063;</span><span class="web"></span><span class="des">question mark</span></a>
<a href="#">@<span class="sym">@</span><span class="cod">&#064;</span><span class="web"></span><span class="des">commercial 'at' sign</span></a>
<a href="#">A<span class="sym">A</span><span class="cod">&#065;</span><span class="web"></span><span class="des"></span></a>
<a href="#">B<span class="sym">B</span><span class="cod">&#066;</span><span class="web"></span><span class="des"></span></a>
<a href="#">C<span class="sym">C</span><span class="cod">&#067;</span><span class="web"></span><span class="des"></span></a>
<a href="#">D<span class="sym">D</span><span class="cod">&#068;</span><span class="web"></span><span class="des"></span></a>
<a href="#">E<span class="sym">E</span><span class="cod">&#069;</span><span class="web"></span><span class="des"></span></a>
<a href="#">F<span class="sym">F</span><span class="cod">&#070;</span><span class="web"></span><span class="des"></span></a>
<a href="#">G<span class="sym">G</span><span class="cod">&#071;</span><span class="web"></span><span class="des"></span></a>
<a href="#">H<span class="sym">H</span><span class="cod">&#072;</span><span class="web"></span><span class="des"></span></a>
<a href="#">I<span class="sym">I</span><span class="cod">&#073;</span><span class="web"></span><span class="des"></span></a>
<a href="#">J<span class="sym">J</span><span class="cod">&#074;</span><span class="web"></span><span class="des"></span></a>
<a href="#">K<span class="sym">K</span><span class="cod">&#075;</span><span class="web"></span><span class="des"></span></a>
<a href="#">L<span class="sym">L</span><span class="cod">&#076;</span><span class="web"></span><span class="des"></span></a>
<a href="#">M<span class="sym">M</span><span class="cod">&#077;</span><span class="web"></span><span class="des"></span></a>
<a href="#">N<span class="sym">N</span><span class="cod">&#078;</span><span class="web"></span><span class="des"></span></a>
<a href="#">O<span class="sym">O</span><span class="cod">&#079;</span><span class="web"></span><span class="des"></span></a>
<a href="#">P<span class="sym">P</span><span class="cod">&#080;</span><span class="web"></span><span class="des"></span></a>
<a href="#">Q<span class="sym">Q</span><span class="cod">&#081;</span><span class="web"></span><span class="des"></span></a>
<a href="#">R<span class="sym">R</span><span class="cod">&#082;</span><span class="web"></span><span class="des"></span></a>
<a href="#">S<span class="sym">S</span><span class="cod">&#083;</span><span class="web"></span><span class="des"></span></a>
<a href="#">T<span class="sym">T</span><span class="cod">&#084;</span><span class="web"></span><span class="des"></span></a>
<a href="#">U<span class="sym">U</span><span class="cod">&#085;</span><span class="web"></span><span class="des"></span></a>
<a href="#">V<span class="sym">V</span><span class="cod">&#086;</span><span class="web"></span><span class="des"></span></a>
<a href="#">W<span class="sym">W</span><span class="cod">&#087;</span><span class="web"></span><span class="des"></span></a>
<a href="#">X<span class="sym">X</span><span class="cod">&#088;</span><span class="web"></span><span class="des"></span></a>
<a href="#">Y<span class="sym">Y</span><span class="cod">&#089;</span><span class="web"></span><span class="des"></span></a>
<a href="#">Z<span class="sym">Z</span><span class="cod">&#090;</span><span class="web"></span><span class="des"></span></a>
<a href="#">[<span class="sym">[</span><span class="cod">&#091;</span><span class="web"></span><span class="des">left square bracket</span></a>
<a href="#">\<span class="sym">\</span><span class="cod">&#092;</span><span class="web"></span><span class="des">backslash</span></a>
<a href="#">]<span class="sym">]</span><span class="cod">&#093;</span><span class="web"></span><span class="des">right square bracket</span></a>
<a href="#">^<span class="sym">^</span><span class="cod">&#094;</span><span class="web"></span><span class="des">caret</span></a>
<a href="#">_<span class="sym">_</span><span class="cod">&#095;</span><span class="web"></span><span class="des">underscore</span></a>
<a href="#">`<span class="sym">`</span><span class="cod">&#096;</span><span class="web"></span><span class="des">grave accent</span></a>
<a href="#">a<span class="sym">a</span><span class="cod">&#097;</span><span class="web"></span><span class="des"></span></a>
<a href="#">b<span class="sym">b</span><span class="cod">&#098;</span><span class="web"></span><span class="des"></span></a>
<a href="#">c<span class="sym">c</span><span class="cod">&#088;</span><span class="web"></span><span class="des"></span></a>
<a href="#">d<span class="sym">d</span><span class="cod">&#100;</span><span class="web"></span><span class="des"></span></a>
</div>
</div>
</body>
</html>
