zoukankan      html  css  js  c++  java
  • html 报告页面样式

    修改了下HTML页面样式

    页面代码

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>自动化测试报告</title>
                <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
                <h2 style="font-family: Microsoft YaHei">自动化测试报告</h2>
                <p class='attribute'><strong>测试结果 : </strong> 共 10,通过 9,失败 1</p>
                <style type="text/css" media="screen">
            body  { font-family: Microsoft YaHei,Tahoma,arial,helvetica,sans-serif;padding: 20px;}
            td {text-align:center}
            th {text-align:center}
            </style>
            </head>
            <body>
                <table id='result_table' class="table table-condensed table-bordered table-hover" >
                    <colgroup>
                        <col align='left' />
                        <col align='right' />
                        <col align='right' />
                        <col align='right' />
                    </colgroup>
                    <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
                        <th width="25%">客户端及版本</th>
                        <th width="25%">通过率%</th>
                        <th width="25%">开始时间</th>
                        <th width="25%">结束时间</th>
                    </tr>
                    
            <tr class='failClass warning'>
                <td > 3.8.8</td>
                <td>99</td>
                <td>2019-04-17 20:21:27</td>
                <td>2019-04-17 20:21:27</td>
            </tr>
                </table>
            <!-- 执行模块 -->
            <p class='attribute'><strong>测试详情 : </strong> 执行结果</p>    
                <table id='result_table' class="table table-condensed table-bordered table-hover">
                    <colgroup>
                        <col align='left' />
                        <col align='right' />
                        <col align='right' />
                        <col align='right' />
                    </colgroup>
                    <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
                        <th colspan="2">业务模块</th>
                        <th>用例总数</th>
                        <th>通过数</th>
                        <th>状态</th>
                    </tr>
                     <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
                        <th width="20%"></th>
                        <th width="20%">模块1</th>
                        <th width="20%">10</th>
                        <th width="20%">8</th>
                        <th width="20%"><font color="green">PASS</font></th>
                    </tr>                           
                    
            <tr class='failClass warning'>
                <td></td>
                <td>3.8.8</td>
                <td>100</td>
                <td>90</td>
                <td><font color="green">PASS</font></td>
            </tr>
                     <tr id='header_row' class="text-center success" style="font-weight: bold;font-size: 14px;">
                        <th width="20%"></th>
                        <th width="20%">模块2</th>
                        <th width="20%">10</th>
                        <th width="20%">8</th>
                        <th width="20%"><font color="#FF0000">Fail</font></th>
                    </tr>                           
                    
            <tr class='failClass warning'>
                <td></td>
                <td>3.8.8</td>
                <td>100</td>
                <td>90</td>
                <td><font color="#FF0000">Fail</font></td>
            </tr>        
            
                </table>        
            
    
    
            
                
            </body>
            </html>
  • 相关阅读:
    Python 魔法方法
    使用PHP7来批量更新MangoDB数据
    git 小乌龟安装教程
    webpack初学者(1)
    移动端与PC端的触屏事件
    解决onclick事件的300ms延时问题
    尺寸单位em,rem,vh,vw
    ngRoute 与ui.router区别
    angular.js的依赖注入解析
    ionic的基础学习(第一篇)
  • 原文地址:https://www.cnblogs.com/lisa2016/p/10730387.html
Copyright © 2011-2022 走看看