第一次使用css样式啊，先记录一下先

最新推荐文章于 2024-09-14 13:04:57 发布

Jave.Lin

最新推荐文章于 2024-09-14 13:04:57 发布

阅读量1k

点赞数

文章标签： css border generator table function html

本文链接：https://blog.csdn.net/linjf520/article/details/7419588

版权

今天为自己写的一个：C#写的生成 [通讯协议解析AS3脚本工具] 中，为自动生成的协议说明文档进行了css样式化:

感觉还不错，毕竟是第一次使用，必须记录一下：css与jQuery。在Div+css5 教程网，与w3shcool网自学了一下。

模版信息的.html文档内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Decoder Instruction </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="Jave.Lin">
  <META NAME="Keywords" CONTENT="Decoder Instruction">
  <META NAME="Description" CONTENT="Decoder Instruction Document">
  <script type="text/javascript" src="jQuery.js"/></script>
  <script type="text/javascript">
    function showAll()
    {
        //将所有表显示
            $("table").css("display","");
    }
    function onSelectedHandler(value)
    {
        //显示所有表格
        if(value=="all")
        {
            //将所有表显示
            $("table").css("display","");
        }
        //筛选指定的
        else
        {
            //隐藏所有类名为：packageTR的表
            $("table.packageTB").css("display","none");
//            //隐藏所有类名为：subDataTR的表
//            $("table.subDataTB").css("display","none");
//            //隐藏所有类名为：arrayTR的表
//            $("table.arrayTB").css("display","none");
            //显示id为:value的表
            $("table#"+value).css("display","");
//            $("th#"+value).css("display","");
//            $("tr#"+value).css("display","");
//            $("tb#"+value).css("display","");
        }
    }
  </script>
  <style>
    BODY 
    {
        FONT-SIZE: 12px;
        font-family:Verdana;
        background-color:#fffff2;
    }
    Table{border-collapse:collapse;border:none;background-color:#fffff0;}
    TH {FONT-SIZE: 14px;font-family:Verdana;border:solid#999999 1px;}
    TD {FONT-SIZE: 12px;font-family:Verdana;border:solid#888888 1px;}
    TR {FONT-SIZE: 12px;font-family:Verdana;border:solid#999999 1px;}
    /* 目录子项 */
    .contentItem
    {
        width:100%;
        color:#0000ff;
        background-color:#fffff2;
        font-size:14px;
        font-weight:bold;
        border:solid #999999 1px
    }
    /* 目录 */
    .contents
    {
        border:none;
        FONT-SIZE:24px;
        width:100%;
        color:#000000;
        background-color:#fffacd;
        font-weight:bold;
    }
    /* 筛选 */
    .sift
    {
        border:none;
        FONT-SIZE:24px;
        width:100%;
        color:#000000;
        background-color:#fffacd;
        font-weight:bold;
    }
    /* 提示(说明package) */
    .tips
    {
        border:none;
        FONT-SIZE:24px;
        width:70100
        color:#000000;
        background-color:#fffacd;
        font-weight:bold;
    }
    /* 目录表格 */
    .contentsTB
    {
        width:100%;
    }
    /* 数据包表头 */
    .packageTH
    {
        border:2px solid #666;
        font-weight:bold;
        color:#000000;
        background-color:#fffacd;
    }
    /* 数据包表格 */
    .packageTB
    {
        width:100%;
        border:1px solid #666;
    }
    /* 数据包行 */
    .packageTR
    {
        background-color:#fffce5;
        border:1px solid #666;
    }
    /* 子数据段表头 */
    .subDataTH
    {
        border:2px solid #666;
        font-weight:bold;
        color:#000000;
        background-color:#cdeaff;
    }
    /* 子数据段表格 */
    .subDataTB
    {
        width:100%;
        border:1px solid #666;
    }
    /* 子数据段行 */
    .subDataTR
    {
        background-color:#e8f5ff;
        border:1px solid #666;
    }
    /* 数组表头 */
    .arrayTH
    {
        border:2px solid #666;
        font-weight:bold;
        color:#000000;
        background-color:#d2fccf;
    }
    /* 数组表格 */
    .arrayTB
    {
        width:100%;
        border:1px solid #666;
    }
    /* 数组行 */
    .arrayTR
    {
        background-color:#edfcec;
        border:1px solid #666;
    }
    /* 根部div */
    .rootDiv
    {
        position:relative; 
        width:1000px; 
        left:50%; 
        margin-left:-500px;
    }
    /* 描述类型的表格格子 */
    #desTd
    {
        color:#8a1616;
        font-weight:bold;
    }
    /* 常量名称的表格格子 */
    #constTd
    {
        color:#0000ff;
        font-weight:bold;
    }
  </style>
 </HEAD>

 <BODY>
    <div class="rootDiv">
	    {$tableContent}
	</div>
 </BODY>
</HTML>