zoukankan      html  css  js  c++  java
  • 【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

  • 相关阅读:
    PostgreSQL查看等待锁的SQL和进程
    effective_io_concurrency很重要的一个参数
    PostgreSQL逻辑复制到kafka-实践
    Linux下路由配置梳理(转)
    创建B树,动态添加节点,并使用三种遍历算法对树进行遍历
    思考--PostgreSQL在与mysql的比较中稍微弱势项
    思考-继续思考在数据库中两个表join的问题
    思考--mysql 分库分表的思考
    超级实用的网址大全
    C++ 读取txt文本内容,并将结果保存到新文本
  • 原文地址:https://www.cnblogs.com/heyang78/p/15585459.html
Copyright © 2011-2022 走看看