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

  • 相关阅读:
    VUE-cli使用
    2017/04/09王晨分享课大纲
    CommonJS模块和ES6模块的区别
    css常见布局方式
    从输入 URL 到页面加载完成的过程中都发生了什么
    函数节流与防抖的实现
    JavaScript表单
    jQuery方法实现
    移动端去除横向滚动条
    请假时碰到法定假期,实际请假几天?
  • 原文地址:https://www.cnblogs.com/heyang78/p/15585459.html
Copyright © 2011-2022 走看看