zoukankan      html  css  js  c++  java
  • Html模板

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
    <!-- saved from url=(0022)http://www.h3c.com.cn/ -->
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Html模板</title>
    <style> /*提示圆角框*/
    .circle_bot {
        clear: both;
        font: 12px/1.125 Arial;
    }
    
    .circle_bot .s_b b, .circle_bot span.s_i i {
        font-size: 1px;
        line-height: 1px;
        overflow: hidden;
        display: block;
        clear: both;
    }
    
    .circle_bot .s_b b, .circle_bot span.s_i i, .circle_bot .info {
        background: #fff2f2;
        border: #f88 solid;
    }
    
    .circle_bot b.b1 {
        border-width: 1px 0 0 0;
        margin: 0 2px;
        height: 0px;
    }
    
    .circle_bot b.b2 {
        border-width: 0 1px;
        margin: 0 1px;
        height: 1px;
    }
    
    .circle_bot span.s_i i {
        height: 1px;
        border-width: 0 1px;
    }
    
    .circle_bot .i1 {
        width: 0px;
        margin-left: 36px;
    }
    
    .circle_bot .i2 {
        width: 2px;
        margin-left: 35px;
    }
    
    .circle_bot .i3 {
        width: 4px;
        margin-left: 34px;
    }
    
    .circle_bot .i4 {
        width: 6px;
        margin-left: 33px;
    }
    
    .circle_bot .i5 {
        width: 8px;
        margin-left: 32px;
    }
    
    .circle_bot .i6 {
        width: 10px;
        margin-left: 31px;
        margin-top: -1px;
    }
    
    .circle_bot .info {
        border-width: 0 1px;
        color: #333;
        padding: 10px;
    } /*浅黄边白底*/
    div.circle_yellow {
        clear: both;
    }
    
    div.circle_yellow .s_b b, div.circle_yellow .s_i i, div.circle_yellow .info
        {
        background: #fff;
        border-color: #db9;
    }
    
    body {
        font-size: 10pt;
    }
    
    .root {
        
    }
    
    .theader {
        background-color: #eeeeee;
        text-align: center;
        font-weight: bold;
    }
    
    ul, li {
        display: block;
        cursor: pointer;
        padding-left: 5px;
        margin: 0px
    }
    
    ul {
        padding-left: 15px;
    }
    
    .highlight {
        background-color: #88ff88;
    }
    
    .pass {
        background-color: #ffffff;
    }
    
    .info {
        background-color: #ccccff;
    }
    
    .warn {
        background-color: #ffff99;
    }
    
    .error {
        background-color: #ffbbbb;
    }
    
    .fatal {
        background-color: #ff0000;
        color: #ffffff;
    }
    
    .diagram {
        font-size: 10pt;
        padding: 3px;
        border: 1px solid #555555;
    }
    
    #diagram {
        font-size: 12pt;
        text-align: left;
        padding: 20px;
    }
    
    #device_info {
        font-size: 10pt;
        padding: 20px;
    }
    
    #diag_report {
        padding: 20px;
    }
    
    #diag_report table {
        border: 1px solid #999999;
        border-right: 2px solid #999999;
    }
    
    #diag_report table td {
        word-break: keep-all;
        border-bottom: 1px solid #555555;;
        padding: 5px;
        font-size: 10pt;
    }
    
    #solution {
        width: 550px;
        line-height: 15pt;
        display: none;
        position: absolute;
    }
    
    #solution_flag_div {
        cursor: pointer;
        padding-left: 20px;
        width: 200px;
    }
    
    #diag_path {
        font-size: 10pt;
    }
    </style>
    </head>
    <body>
        <div id="diag_report">
            <table cellspacing='0' cellpadding='0'>
                <tr class='theader'>
                    <td style='border-right: 1px solid'>编号
                    <td>类别</td>
                    <td>检查项</td>
                    <td>级别</td>
                    <td class='infoheader'>巡检结果</td>
                    <td class='infoheader'>建议</td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>1</td>
                    <td rowspan='2' style='border-right: 1px solid'>集群</td>
                    <td>检查集群高可靠性(HA)功能</td>
                    <td>重要</td>
                    <td>不通过</td>
                    <td class='root'><ul>
                            <li class='error' onclick='switch_menu(this)'>+建议开启集群高可靠性(HA)功能</li>
                            <ul>
                                <li class='error' onclick='switch_menu(this)'>序号="1"&nbsp;&nbsp;&nbsp;集群名称="Cluster02"&nbsp;&nbsp;&nbsp;HA状态="未开启"&nbsp;&nbsp;&nbsp;</li>
                            </ul>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>2</td>
                    <td>检查集群计算资源DRS功能</td>
                    <td>重要</td>
                    <td>不通过</td>
                    <td class='root'><ul>
                            <li class='error' onclick='switch_menu(this)'>+建议开启集群计算资源DRS功能</li>
                            <ul>
                                <li class='error' onclick='switch_menu(this)'>序号="1"&nbsp;&nbsp;&nbsp;集群名称="Cluster01"&nbsp;&nbsp;&nbsp;计算DRS状态="未开启"&nbsp;&nbsp;&nbsp;</li>
                                <li class='error' onclick='switch_menu(this)'>序号="2"&nbsp;&nbsp;&nbsp;集群名称="Cluster02"&nbsp;&nbsp;&nbsp;计算DRS状态="未开启"&nbsp;&nbsp;&nbsp;</li>
                            </ul>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>3</td>
                    <td rowspan='8' style='border-right: 1px solid'>主机</td>
                    <td>检查CVK主机和CVM主机的CAS版本是否一致</td>
                    <td></td>
                    <td>通过</td>
                    <td class='root'><ul>
                            <li class='info' onclick='switch_menu(this)'>CVK主机和CVM主机的CAS版本必须保持一致</li>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>4</td>
                    <td>检查主机状态是否正常</td>
                    <td>重要</td>
                    <td>通过</td>
                    <td class='root'><ul>
                            <li class='info' onclick='switch_menu(this)'>确保所有主机状态正常</li>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>5</td>
                    <td>检查NTP服务器配置</td>
                    <td>重要</td>
                    <td>不通过</td>
                    <td class='root'><ul>
                            <li class='error' onclick='switch_menu(this)'>+建议配置主备NTP服务器</li>
                            <ul>
                                <li class='error' onclick='switch_menu(this)'>NTP服务器配置="未配置"&nbsp;&nbsp;&nbsp;</li>
                            </ul>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>6</td>
                    <td>检查CVK和CVM主机的时间差</td>
                    <td>重要</td>
                    <td>通过</td>
                    <td class='root'><ul>
                            <li class='info' onclick='switch_menu(this)'>CVK和CVM主机的系统时间需要保持一致</li>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>7</td>
                    <td>检查主机系统时间和物理时钟的时间差</td>
                    <td>重要</td>
                    <td>通过</td>
                    <td class='root'><ul>
                            <li class='info' onclick='switch_menu(this)'>主机系统时间和物理时钟需要保持一致</li>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>8</td>
                    <td>检查主机CPU利用率</td>
                    <td>紧急</td>
                    <td>通过</td>
                    <td class='root'><ul>
                            <li class='info' onclick='switch_menu(this)'>建议主机CPU利用率不要超过80%</li>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>9</td>
                    <td>检查主机内存利用率</td>
                    <td>紧急</td>
                    <td>通过</td>
                    <td class='root'><ul>
                            <li class='info' onclick='switch_menu(this)'>建议主机内存利用率不要超过80%</li>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>10</td>
                    <td>检查主机分区利用率</td>
                    <td>紧急</td>
                    <td>通过</td>
                    <td class='root'><ul>
                            <li class='info' onclick='switch_menu(this)'>建议主机分区利用率不要超过80%</li>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>11</td>
                    <td rowspan='5' style='border-right: 1px solid'>虚拟交换机</td>
                    <td>检查虚拟交换机状态</td>
                    <td>重要</td>
                    <td>通过</td>
                    <td class='root'><ul>
                            <li class='info' onclick='switch_menu(this)'>确保虚拟交换机状态正常</li>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>12</td>
                    <td>检查主机是否只有管理虚拟交换机</td>
                    <td>重要</td>
                    <td>通过</td>
                    <td class='root'><ul>
                            <li class='info' onclick='switch_menu(this)'>管理、存储和业务虚拟交换机不能合并使用</li>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>13</td>
                    <td>检查虚拟交换机的网卡状态</td>
                    <td>重要</td>
                    <td>不通过</td>
                    <td class='root'><ul>
                            <li class='error' onclick='switch_menu(this)'>+确保虚拟交换机绑定的物理网卡状态正常</li>
                            <ul>
                                <li class='error' onclick='switch_menu(this)'>序号="1"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-test"&nbsp;&nbsp;&nbsp;网卡名称="eth3"&nbsp;&nbsp;&nbsp;网卡状态="不活动"&nbsp;&nbsp;&nbsp;</li>
                            </ul>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>14</td>
                    <td>检查虚拟交换机的链路冗余状态</td>
                    <td>重要</td>
                    <td>不通过</td>
                    <td class='root'><ul>
                            <li class='error' onclick='switch_menu(this)'>+建议虚拟交换机绑定多个物理网卡,提高链路冗余性</li>
                            <ul>
                                <li class='error' onclick='switch_menu(this)'>序号="1"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK01"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-app"&nbsp;&nbsp;&nbsp;网卡名称="eth1"&nbsp;&nbsp;&nbsp;</li>
                                <li class='error' onclick='switch_menu(this)'>序号="2"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK01"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-storage"&nbsp;&nbsp;&nbsp;网卡名称="eth2"&nbsp;&nbsp;&nbsp;</li>
                                <li class='error' onclick='switch_menu(this)'>序号="3"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK01"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch0"&nbsp;&nbsp;&nbsp;网卡名称="eth0"&nbsp;&nbsp;&nbsp;</li>
                                <li class='error' onclick='switch_menu(this)'>序号="4"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-app"&nbsp;&nbsp;&nbsp;网卡名称="eth2"&nbsp;&nbsp;&nbsp;</li>
                                <li class='error' onclick='switch_menu(this)'>序号="5"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-storage"&nbsp;&nbsp;&nbsp;网卡名称="eth1"&nbsp;&nbsp;&nbsp;</li>
                                <li class='error' onclick='switch_menu(this)'>序号="6"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-test"&nbsp;&nbsp;&nbsp;网卡名称="eth3"&nbsp;&nbsp;&nbsp;</li>
                                <li class='error' onclick='switch_menu(this)'>序号="7"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch0"&nbsp;&nbsp;&nbsp;网卡名称="eth0"&nbsp;&nbsp;&nbsp;</li>
                            </ul>
                        </ul></td>
                </tr>
                <tr>
                    <td style='border-right: 1px solid;'>15</td>
                    <td>检查集群下CVK主机的虚拟交换机名称是否一致</td>
                    <td>紧急</td>
                    <td>不通过</td>
                    <td class='root'><ul>
                            <li class='error' onclick='switch_menu(this)'>+确保集群下CVK主机的虚拟交换机名称保持一致</li>
                            <ul>
                                <li class='error' onclick='switch_menu(this)'>+序号="1"&nbsp;&nbsp;&nbsp;集群名称="Cluster01"&nbsp;&nbsp;&nbsp;主机一名称="HZ-CAS01-CVK01"&nbsp;&nbsp;&nbsp;主机二名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;</li>
                                <ul>
                                    <li class='error' onclick='switch_menu(this)'>主机名称="HZ-CAS01-CVK01"&nbsp;&nbsp;&nbsp;虚拟交换机名称="test,vswitch-app,vswitch-storage,vswitch0"&nbsp;&nbsp;&nbsp;</li>
                                    <li class='error' onclick='switch_menu(this)'>主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-app,vswitch-storage,vswitch-test,vswitch0"&nbsp;&nbsp;&nbsp;</li>
                                </ul>
                            </ul>
                        </ul></td>
                </tr>
            </table>
        </div>
        <!--解决方案文字框-->
        <div id="solution" class="circle_bot circle_yellow">
            <span class="s_b"> <b class="b1"></b> <b class="b2"></b></span>
            <div id="info" class="info"></div>
            <span class="s_b"><b class="b2"></b> <b class="b1"></b></span> <span
                class="s_i"> <i class="i6"></i> <i class="i5"></i> <i
                class="i4"></i> <i class="i3"></i> <i class="i2"></i> <i class="i1"></i></span>
        </div>
    
        <script> 
        function showfold(obj)
                {
                    var
            curr_status=obj.style.display; obj.style.display=( curr_status==
            "block" || curr_status== "" )? "none" : "";
                }
                
                function
            addEvent(obj)
                {
                    obj.onclick=showfold(obj) }
                
                function
            fold (obj)
                {
                    obj.style.display="none"
            ;
                }
                
                function
            show (obj)
                {
                    obj.style.display="block"
            ;
                }
                            
                function
            show_solution(obj)
                {
                    
                    //IE支持window.event事件,而火狐(ff)不支持,需要显式地去获取onmouseover事件event,才能用event获得坐标x,y
            var event=getEvent(); var show_flag=document.getElementById(
            "solution_flag").checked;
                    if (show_flag !=true)
            {
                        return;
                    }
                    
                    var text=obj.getAttribute(
            "solution");
                    if (text== null || text.length==
            0)
                    {
                        return;
                    }
                    var
            solution=document.getElementById( "solution");
                    var
            info=document.getElementById(
            "info");
                    solution.style.display="block"
            ;    
                    
                    //ff不支持innerText方法,改为兼容的textContent
            if(!document.all) 
                    {
                        info.textContent=text;
            } else {
                        info.innerText=text;
            }
                    
    
    
                    //ff不支持style.posLeft和style.posTop方法,这里改为兼容的style.left和style.top;另外ff还要求赋值得加上"px"
                    //solution.style.left=event.clientX
            - 30 + document.documentElement.scrollLeft+"px";
                    //solution.style.top=event.clientY
            - solution.offsetHeight - 15 + document.documentElement.scrollTop+"px" ;
                    
                    solution.style.left=event.clientX
            - 30 + (document.body.scrollLeft||document.documentElement.scrollLeft)+"px";                                                                                                       
                    solution.style.top=event.clientY
            - solution.offsetHeight - 15 + (document.body.scrollTop||document.documentElement.scrollTop)+"px" ;
                    
    
                    //solution.style.posLeft=event.clientX
            - 30 + document.documentElement.scrollLeft;
                    //solution.style.posTop=event.clientY
            - solution.offsetHeight - 15 + document.documentElement.scrollTop ;
                            
                }
                function
            hide_solution()
                {
                    document.getElementById("solution").style.display="none"
            ;
                }
                
                function highlight(obj)
                {
                    var
            class_old=obj.className; obj.className="highlight"
            ;
                    obj.setAttribute("class_old", class_old);
                    
                
                    show_solution(obj);
                    
                    
                }
                
                function
            recover(obj)
                {
                    obj.className=obj.getAttribute(
            "class_old");
                    hide_solution();
                }
                
                function
            getRootElements()
                {
                    var result=[]; var
            root_list=document.getElementsByTagName( "TD");
                    for (var i=0; i< root_list.length ; i ++)
                    {
                        if (root_list[i].className == "root")
                        {
                            result.push(root_list[i]);
                        }
                    } 
                    return result;
                }
                
                //把除第一级标题下的子标题隐藏
                var is_set = false;
                function switch_sub ( how )
                {
                    //var root_list = document.getElementsByClassName("root");
                    var root_list = getRootElements();
                    
                    for (var i = 0 ; i < root_list.length; i++)
                    {
                        var ul_list = root_list[i].getElementsByTagName("UL");
                        for (var j = 0; j < ul_list.length; j++)
                        {
                                if (ul_list[j] != root_list[i].firstChild)
                                {
                                    if (how == "fold")
                                    {
                                        fold(ul_list[j]);
                                    }else{
                                        show(ul_list[j]);
                                    }
                                }
                        }
                        
                        if (!is_set)
                        {
                            var li_list = root_list[i].getElementsByTagName("LI");
                            for ( var k = 0 ; k < li_list.length; k++)
                            {
                                li_list[k].setAttribute("onmouseover", "highlight(this)"); 
                                li_list[k].setAttribute("onmouseout", "recover(this)");
                            }
                        }
                        
                        
    
                    }
                    is_set = true;
                }
                
                //展开和收起子项时,改变+ -
                function change_icon(obj)
                {
                    var str = obj.firstChild.nodeValue;
                    if ( str.indexOf("+") < 3 && str.indexOf("+") != -1)
                    {
                        
                        obj.firstChild.nodeValue = str.replace("+", "-");
                        //obj.firstChild.nodeValue = str.replace("?", "?");
                            
                    } 
                    else if ( str.indexOf("-") < 3 && str.indexOf("-") != -1 )
                    {
                        obj.firstChild.nodeValue = str.replace("-", "+");
                    }
                    
                }
                
                function switch_menu(obj)
                {
                    var uplevel = obj.parentNode;
                    //var uplevel = obj;
                    var ul_list = uplevel.childNodes;
                    
                    
                    change_icon(obj);
                    
                    
                    for (var i = 0; i < ul_list.length; i++)
                    {
                        if (ul_list[i].nodeName == "UL")
                        {
                            showfold(ul_list[i]);
                        }
                    }
                }
                switch_sub('fold');
                
                
                
                
                //兼容ie和ff获得event的方法
                function getEvent()  
          {  
            //如果是IE
            if(document.all)  return window.event;
            
            //如果不是IE    
            func=getEvent.caller;        
            while(func!=null){  
                var arg0=func.arguments[0]; 
                if(arg0) 
                { 
                  if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) 
                  {  
                  return arg0; 
                  } 
                } 
                func=func.caller; 
            } 
            return null; 
          } 
          //------------------------------------------------------------------------------------------------------------------------------------------------------------------
          //兼容修改到这结束
    
                
                
                
            </script>
    </body>
    </html>
  • 相关阅读:
    PAT B1045 快速排序 (25 分)
    PAT B1042 字符统计 (20 分)
    PAT B1040 有几个PAT (25 分)
    PAT B1035 插入与归并 (25 分)
    PAT B1034 有理数四则运算 (20 分)
    PAT B1033 旧键盘打字 (20 分)
    HDU 1231 最大连续子序列
    HDU 1166 敌兵布阵
    HDU 1715 大菲波数
    HDU 1016 Prime Ring Problem
  • 原文地址:https://www.cnblogs.com/mrxiaohe/p/6037572.html
Copyright © 2011-2022 走看看