【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
分类:
Web.Css
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
2019-11-21 在一个以表为业务核心的应用中，怎么才可以做到业务和表操作分离？
2017-11-21 Node.js abaike图片批量下载爬虫1.02
2017-11-21 Node.js nvshens图片批量下载爬虫1.01
2017-11-21 Node.js meitulu图片批量下载爬虫1.051
2014-11-21 【数学】推荐一种用尺规绘制正五边形，简单而又精确的作法
2013-11-21 使用apache-cxf-2.2.10来制作一个极简版WebService程序