<!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: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:#008; text-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"> </span><span class="web"></span><span class="des">space</span></a>
<a href="#">!<span class="sym">!</span><span class="cod">!</span><span class="web"></span><span class="des">exclamation point</span></a>
<a href="#">"<span class="sym">"</span><span class="cod">"</span><span class="web">"</span><span class="des">quotation mark</span></a>
<a href="#">#<span class="sym">#</span><span class="cod">#</span><span class="web"></span><span class="des">hash mark</span></a>
<a href="#">$<span class="sym">$</span><span class="cod">$</span><span class="web"></span><span class="des">dollar sign</span></a>
<a href="#">%<span class="sym">%</span><span class="cod">%</span><span class="web"></span><span class="des">percent sign</span></a>
<a href="#">&<span class="sym">&</span><span class="cod">&</span><span class="web">&</span><span class="des">ampersand</span></a>
<a href="#">'<span class="sym">'</span><span class="cod">'</span><span class="web"></span><span class="des">apostrophe</span></a>
<a href="#">(<span class="sym">(</span><span class="cod">(</span><span class="web"></span><span class="des">left parenthesis</span></a>
<a href="#">)<span class="sym">)</span><span class="cod">)</span><span class="web"></span><span class="des">right parenthesis</span></a>
<a href="#">*<span class="sym">*</span><span class="cod">*</span><span class="web"></span><span class="des">asterisk</span></a>
<a href="#">+<span class="sym">+</span><span class="cod">+</span><span class="web"></span><span class="des">plus sign</span></a>
<a href="#">,<span class="sym">,</span><span class="cod">,</span><span class="web"></span><span class="des">comma</span></a>
<a href="#">-<span class="sym">-</span><span class="cod">-</span><span class="web"></span><span class="des">hyphen</span></a>
<a href="#">.<span class="sym">.</span><span class="cod">.</span><span class="web"></span><span class="des">period</span></a>
<a href="#">/<span class="sym">/</span><span class="cod">/</span><span class="web"></span><span class="des">slash</span></a>
<a href="#">0<span class="sym">0</span><span class="cod">0</span><span class="web"></span><span class="des"></span></a>
<a href="#">1<span class="sym">1</span><span class="cod">1</span><span class="web"></span><span class="des"></span></a>
<a href="#">2<span class="sym">2</span><span class="cod">2</span><span class="web"></span><span class="des"></span></a>
<a href="#">3<span class="sym">3</span><span class="cod">3</span><span class="web"></span><span class="des"></span></a>
<a href="#">4<span class="sym">4</span><span class="cod">4</span><span class="web"></span><span class="des"></span></a>
<a href="#">5<span class="sym">5</span><span class="cod">5</span><span class="web"></span><span class="des"></span></a>
<a href="#">6<span class="sym">6</span><span class="cod">6</span><span class="web"></span><span class="des"></span></a>
<a href="#">7<span class="sym">7</span><span class="cod">7</span><span class="web"></span><span class="des"></span></a>
<a href="#">8<span class="sym">8</span><span class="cod">8</span><span class="web"></span><span class="des"></span></a>
<a href="#">9<span class="sym">9</span><span class="cod">9</span><span class="web"></span><span class="des"></span></a>
<a href="#">:<span class="sym">:</span><span class="cod">:</span><span class="web"></span><span class="des">colon</span></a>
<a href="#">;<span class="sym">;</span><span class="cod">;</span><span class="web"></span><span class="des">semicolon</span></a>
<a href="#"><<span class="sym"><</span><span class="cod"><</span><span class="web"><</span><span class="des">less than</span></a>
<a href="#">=<span class="sym">=</span><span class="cod">=</span><span class="web"></span><span class="des">equal sign</span></a>
<a href="#">><span class="sym">></span><span class="cod">></span><span class="web">></span><span class="des">greater than</span></a>
<a href="#">?<span class="sym">?</span><span class="cod">?</span><span class="web"></span><span class="des">question mark</span></a>
<a href="#">@<span class="sym">@</span><span class="cod">@</span><span class="web"></span><span class="des">commercial 'at' sign</span></a>
<a href="#">A<span class="sym">A</span><span class="cod">A</span><span class="web"></span><span class="des"></span></a>
<a href="#">B<span class="sym">B</span><span class="cod">B</span><span class="web"></span><span class="des"></span></a>
<a href="#">C<span class="sym">C</span><span class="cod">C</span><span class="web"></span><span class="des"></span></a>
<a href="#">D<span class="sym">D</span><span class="cod">D</span><span class="web"></span><span class="des"></span></a>
<a href="#">E<span class="sym">E</span><span class="cod">E</span><span class="web"></span><span class="des"></span></a>
<a href="#">F<span class="sym">F</span><span class="cod">F</span><span class="web"></span><span class="des"></span></a>
<a href="#">G<span class="sym">G</span><span class="cod">G</span><span class="web"></span><span class="des"></span></a>
<a href="#">H<span class="sym">H</span><span class="cod">H</span><span class="web"></span><span class="des"></span></a>
<a href="#">I<span class="sym">I</span><span class="cod">I</span><span class="web"></span><span class="des"></span></a>
<a href="#">J<span class="sym">J</span><span class="cod">J</span><span class="web"></span><span class="des"></span></a>
<a href="#">K<span class="sym">K</span><span class="cod">K</span><span class="web"></span><span class="des"></span></a>
<a href="#">L<span class="sym">L</span><span class="cod">L</span><span class="web"></span><span class="des"></span></a>
<a href="#">M<span class="sym">M</span><span class="cod">M</span><span class="web"></span><span class="des"></span></a>
<a href="#">N<span class="sym">N</span><span class="cod">N</span><span class="web"></span><span class="des"></span></a>
<a href="#">O<span class="sym">O</span><span class="cod">O</span><span class="web"></span><span class="des"></span></a>
<a href="#">P<span class="sym">P</span><span class="cod">P</span><span class="web"></span><span class="des"></span></a>
<a href="#">Q<span class="sym">Q</span><span class="cod">Q</span><span class="web"></span><span class="des"></span></a>
<a href="#">R<span class="sym">R</span><span class="cod">R</span><span class="web"></span><span class="des"></span></a>
<a href="#">S<span class="sym">S</span><span class="cod">S</span><span class="web"></span><span class="des"></span></a>
<a href="#">T<span class="sym">T</span><span class="cod">T</span><span class="web"></span><span class="des"></span></a>
<a href="#">U<span class="sym">U</span><span class="cod">U</span><span class="web"></span><span class="des"></span></a>
<a href="#">V<span class="sym">V</span><span class="cod">V</span><span class="web"></span><span class="des"></span></a>
<a href="#">W<span class="sym">W</span><span class="cod">W</span><span class="web"></span><span class="des"></span></a>
<a href="#">X<span class="sym">X</span><span class="cod">X</span><span class="web"></span><span class="des"></span></a>
<a href="#">Y<span class="sym">Y</span><span class="cod">Y</span><span class="web"></span><span class="des"></span></a>
<a href="#">Z<span class="sym">Z</span><span class="cod">Z</span><span class="web"></span><span class="des"></span></a>
<a href="#">[<span class="sym">[</span><span class="cod">[</span><span class="web"></span><span class="des">left square bracket</span></a>
<a href="#">\<span class="sym">\</span><span class="cod">\</span><span class="web"></span><span class="des">backslash</span></a>
<a href="#">]<span class="sym">]</span><span class="cod">]</span><span class="web"></span><span class="des">right square bracket</span></a>
<a href="#">^<span class="sym">^</span><span class="cod">^</span><span class="web"></span><span class="des">caret</span></a>
<a href="#">_<span class="sym">_</span><span class="cod">_</span><span class="web"></span><span class="des">underscore</span></a>
<a href="#">`<span class="sym">`</span><span class="cod">`</span><span class="web"></span><span class="des">grave accent</span></a>
<a href="#">a<span class="sym">a</span><span class="cod">a</span><span class="web"></span><span class="des"></span></a>
<a href="#">b<span class="sym">b</span><span class="cod">b</span><span class="web"></span><span class="des"></span></a>
<a href="#">c<span class="sym">c</span><span class="cod">X</span><span class="web"></span><span class="des"></span></a>
<a href="#">d<span class="sym">d</span><span class="cod">d</span><span class="web"></span><span class="des"></span></a>
</div>
</div>
</body>
</html>
