【CSS】模拟Firefox的about:cache页面做的页面
效果图：
代码：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>标题</title> <style type="text/css"> /*CSS样式*/ .noun{ display:block; clear:both; padding:4px 0 4px 0; } .noun h2{ font-family:consolas; font-weight:bold; font-size:24pt; height:24px; text-height:24px; padding:0 0 0 4px; } .noun ul{ list-style:none; } .noun ul li{ margin:0 0 3px 0; padding:1px; clear:both; } .noun ul li label{ color:navy; font-family:'仿宋','华文仿宋','宋体'; font-weight:bold; font-size:18pt; float:left; width:120px; text-align:right; } .noun ul li span{ font-family:arial,Times New Roman; font-weight:normal; font-size:16pt; float:left; margin:0 0 0 5px; text-align:left; } </style> </head> <body> <div class="noun"> <h2>TemplateFile</h2> <ul> <li><label for="">用途:</label><span>用于指代用户上传的带有变量的可编辑文件，文件类型包括txt、doc、xls、ppt等</span></li> <li><label for="">类名:</label><span>Templatefile</span></li> <li><label for="">别名:</label><span>Uploadfile</span></li> <li><label for="">简写:</label><span>T</span></li> <li><label for="">对应表名:</label><span>AR_UPLOADFILE</span></li> <li><label for="">ID缩写:</label><span>tid</span></li> </ul> </div> <div class="noun"> <h2>Group</h2> <ul> <li><label for="">用途:</label><span>用于作为变量的虚拟容器</span></li> <li><label for="">类名:</label><span>Group</span></li> <li><label for="">别名:</label><span>无</span></li> <li><label for="">简写:</label><span>G</span></li> <li><label for="">对应表名:</label><span>AR_GROUP</span></li> <li><label for="">ID缩写:</label><span>gid</span></li> </ul> </div> <div class="noun"> <h2>Variable</h2> <ul> <li><label for="">用途:</label><span>承接固定值或DB值的量，是系统的核心</span></li> <li><label for="">类名:</label><span>Variable</span></li> <li><label for="">别名:</label><span>无</span></li> <li><label for="">简写:</label><span>V</span></li> <li><label for="">对应表名:</label><span>AR_VARIABLE</span></li> <li><label for="">ID缩写:</label><span>vid</span></li> </ul> </div> <div class="noun"> <h2>Relation</h2> <ul> <li><label for="">用途:</label><span>组与变量的纽带，是</span></li> <li><label for="">类名:</label><span>Relation</span></li> <li><label for="">别名:</label><span>无</span></li> <li><label for="">简写:</label><span>r</span></li> <li><label for="">对应表名:</label><span>AR_RELATION,它是AR_GROUP与AR_VARIABLE的连接表</span></li> <li><label for="">ID缩写:</label><span>无</span></li> </ul> </div> <div class="noun"> <h2>Ear</h2> <ul> <li><label for="">用途:</label><span>Group生成的结果之一，是类似麦穗主枝条的部</span></li> <li><label for="">类名:</label><span>Ear</span></li> <li><label for="">别名:</label><span>无</span></li> <li><label for="">简写:</label><span>E</span></li> <li><label for="">对应表名:</label><span>AR_EAR,包含id,gid,名称和时间</span></li> <li><label for="">ID缩写:</label><span>eid</span></li> </ul> </div> <div class="noun"> <h2>Wheat</h2> <ul> <li><label for="">用途:</label><span>Group生成的结果之二，是类似麦穗上的麦粒</span></li> <li><label for="">类名:</label><span>Wheat</span></li> <li><label for="">别名:</label><span>无</span></li> <li><label for="">简写:</label><span>W</span></li> <li><label for="">对应表名:</label><span>AR_WHEAT,包含id,eid,key和value</span></li> <li><label for="">ID缩写:</label><span>wid</span></li> </ul> </div> </body> </html> <script type="text/javascript"> <!-- // 脚本 //--> </script>
End
