相册方式展现字母表

发布时间：2014-08-19 09:10:04　来源/作者：学技巧网页制作　分类：表格图层阅读：0次点评一下

<!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>像册方式展现字母表——xuejiqiao.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="#"> space</a> <a href="#">!!!exclamation point</a> <a href="#">""""quotation mark</a> <a href="#">###hash mark</a> <a href="#">$$$dollar sign</a> <a href="#">%%%percent sign</a> <a href="#">&&&&ampersand</a> <a href="#">'''apostrophe</a> <a href="#">(((left parenthesis</a> <a href="#">)))right parenthesis</a> <a href="#">***asterisk</a> <a href="#">+++plus sign</a> <a href="#">,,,comma</a> <a href="#">---hyphen</a> <a href="#">...period</a> <a href="#">///slash</a> <a href="#">000</a> <a href="#">111</a> <a href="#">222</a> <a href="#">333</a> <a href="#">444</a> <a href="#">555</a> <a href="#">666</a> <a href="#">777</a> <a href="#">888</a> <a href="#">999</a> <a href="#">:::colon</a> <a href="#">;;;semicolon</a> <a href="#"><<<<less than</a> <a href="#">===equal sign</a> <a href="#">>>>>greater than</a> <a href="#">???question mark</a> <a href="#">@@@commercial 'at' sign</a> <a href="#">AAA</a> <a href="#">BBB</a> <a href="#">CCC</a> <a href="#">DDD</a> <a href="#">EEE</a> <a href="#">FFF</a> <a href="#">GGG</a> <a href="#">HHH</a> <a href="#">III</a> <a href="#">JJJ</a> <a href="#">KKK</a> <a href="#">LLL</a> <a href="#">MMM</a> <a href="#">NNN</a> <a href="#">OOO</a> <a href="#">PPP</a> <a href="#">QQQ</a> <a href="#">RRR</a> <a href="#">SSS</a> <a href="#">TTT</a> <a href="#">UUU</a> <a href="#">VVV</a> <a href="#">WWW</a> <a href="#">XXX</a> <a href="#">YYY</a> <a href="#">ZZZ</a> <a href="#">[[[left square bracket</a> <a href="#">\\\backslash</a> <a href="#">]]]right square bracket</a> <a href="#">^^^caret</a> <a href="#">___underscore</a> <a href="#">```grave accent</a> <a href="#">aaa</a> <a href="#">bbb</a> <a href="#">ccX</a> <a href="#">ddd</a> </div> </div> </body> </html>

(www.xuejiqiao.com)提示：可修改后再运行代码!

像册方式展现字母表，鼠标移动过去看大图。有点类似淘宝里图片放大的效果

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！

学技巧网站制作

相册方式展现字母表

极酷的表格（表格的颜色不断变化）

点击按钮后给Div图层设置随机背景颜色

鼠标滑过表格内单个单元格的背景变色特效