网页特效：像册方式展现字母表

2007-06　　作者：佚名　　来源：不详　网友评论　

<!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>像册方式展现字母表——Webjx.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:#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="#"> &#032;space</a> <a href="#">!!&#033;exclamation point</a> <a href="#">""&#034;&quot;quotation mark</a> <a href="#">##&#035;hash mark</a> <a href="#">$$&#036;dollar sign</a> <a href="#">%%&#037;percent sign</a> <a href="#">&&&#038;&amp;ampersand</a> <a href="#">''&#039;apostrophe</a> <a href="#">((&#040;left parenthesis</a> <a href="#">))&#041;right parenthesis</a> <a href="#">**&#042;asterisk</a> <a href="#">++&#043;plus sign</a> <a href="#">,,&#044;comma</a> <a href="#">--&#045;hyphen</a> <a href="#">..&#046;period</a> <a href="#">//&#047;slash</a> <a href="#">00&#048;</a> <a href="#">11&#049;</a> <a href="#">22&#050;</a> <a href="#">33&#051;</a> <a href="#">44&#052;</a> <a href="#">55&#053;</a> <a href="#">66&#054;</a> <a href="#">77&#055;</a> <a href="#">88&#056;</a> <a href="#">99&#057;</a> <a href="#">::&#058;colon</a> <a href="#">;;&#059;semicolon</a> <a href="#"><<&#060;&lt;less than</a> <a href="#">==&#061;equal sign</a> <a href="#">>>&#062;&gt;greater than</a> <a href="#">??&#063;question mark</a> <a href="#">@@&#064;commercial 'at' sign</a> <a href="#">AA&#065;</a> <a href="#">BB&#066;</a> <a href="#">CC&#067;</a> <a href="#">DD&#068;</a> <a href="#">EE&#069;</a> <a href="#">FF&#070;</a> <a href="#">GG&#071;</a> <a href="#">HH&#072;</a> <a href="#">II&#073;</a> <a href="#">JJ&#074;</a> <a href="#">KK&#075;</a> <a href="#">LL&#076;</a> <a href="#">MM&#077;</a> <a href="#">NN&#078;</a> <a href="#">OO&#079;</a> <a href="#">PP&#080;</a> <a href="#">QQ&#081;</a> <a href="#">RR&#082;</a> <a href="#">SS&#083;</a> <a href="#">TT&#084;</a> <a href="#">UU&#085;</a> <a href="#">VV&#086;</a> <a href="#">WW&#087;</a> <a href="#">XX&#088;</a> <a href="#">YY&#089;</a> <a href="#">ZZ&#090;</a> <a href="#">[[&#091;left square bracket</a> <a href="#">\\&#092;backslash</a> <a href="#">]]&#093;right square bracket</a> <a href="#">^^&#094;caret</a> <a href="#">__&#095;underscore</a> <a href="#">``&#096;grave accent</a> <a href="#">aa&#097;</a> <a href="#">bb&#098;</a> <a href="#">cc&#088;</a> <a href="#">dd&#100;</a> </div> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

>> 更多评论