• 表格demo


    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">

    <head>
      <title>标题</title>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="renderer" content="webkit" />
      <meta name="description" content="描述" />
      <meta name="keywords" content="关键字" />
      <link rel="icon" href="http://file.ih5.cn/favicon.ico" type="image/x-icon" />
    </head>

    <body>
      <style>

        html {
          background: #fff;
        }

        .box {
           550px;
          padding-top: 50px;
          margin: 0 auto;
        }

        ul {
          border: 1px solid #ddd;
        }

        ul li {
          display: flex;
          border-bottom: 1px solid #ddd;
        }

        ul li:last-child {
          border-bottom: none;
        }

        ul .item {
          flex: 1;
          height: 100%;
          display: flex;
        }


        ul .item .tit {
          background-color: pink;
          flex-shrink: 0;
           100px;
          /* height: 60px; */
          line-height: 60px;
          font-size: 14px;
          color: #000;
          text-align: center;
          border-right: 1px solid #ddd;
          font-weight: 500;
        }

        ul li .item:nth-child(2) .tit {
          border-left: solid 1px #ddd;
        }

        ul .item .con {
          flex: 1;
          /* line-height: 40px; */
          font-size: 14px;
          color: #666;
          padding-left: 20px;
        }

        .center {
          display: flex;
        }

        .center .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          border: 1px solid #ddd;
          border-left: 0;
          padding-top: 50px;
        }

        .center .right {
          flex: 4.5;
          border-top: 1px solid #dddddd;
          border-bottom: 1px solid #dddddd;
        }

        .title {
          text-align: center;
          margin: 10px 0;
          font-weight: 700;
        }

        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
      </style>

      <div class="box">
        <p class="title">招标文件流转审核表</p>
        <ul>
          <div class="top">
            <li>
              <div class="item">
                <div class="tit">招标项目</div>
                <div class="con"></div>
              </div>
            </li>
            <li>
              <div class="item">
                <div class="tit">主办部门意见</div>
                <div class="con">
                  <div>主要评审内容</div>
                  <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">主办部门:</span> <span
                      style="flex: 1;">主办部门</span> <span style="flex: 1;">负责人</span> <span style="flex: 1;">
                      日期</span>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item">
                <div class="tit">招标采购部意见</div>
                <div class="con">
                  <div style="margin-top: 50px;display: flex;"><span style="flex: 1;">主办部门:</span> <span
                      style="flex: 1;">主办部门</span> <span style="flex: 1;">负责人</span> <span style="flex: 1;">
                      日期</span>
                  </div>
                </div>
              </div>
            </li>
          </div>
          <div class="center">
            <div class="left">
              <div>审</div>
              <div>核</div>
              <div>部</div>
              <div>门</div>
              <div>意</div>
              <div>见</div>
            </div>
            <div class="right">
              <li>
                <div class="item">
                  <div class="tit">工程部</div>
                  <div class="con">
                    <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">负责人</span> <span style="flex: 1;">
                        日期</span>
                    </div>
                  </div>
                </div>

              </li>
              <li>
                <div class="item">
                  <div class="tit">总工办</div>
                  <div class="con">
                    <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">负责人</span> <span style="flex: 1;">
                        日期</span>
                    </div>
                  </div>
                </div>

              </li>
              <li>
                <div class="item">
                  <div class="tit">计生部</div>
                  <div class="con">
                    <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">负责人</span> <span style="flex: 1;">
                        日期</span>
                    </div>
                  </div>
                </div>

              </li>
              <li>
                <div class="item">
                  <div class="tit">财务部</div>
                  <div class="con">
                    <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">负责人</span> <span style="flex: 1;">
                        日期</span>
                    </div>
                  </div>
                </div>

              </li>
              <li>
                <div class="item">
                  <div class="tit">综合办</div>
                  <div class="con">
                    <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">负责人</span> <span style="flex: 1;">
                        日期</span>
                    </div>
                  </div>
                </div>

              </li>
            </div>
          </div>
          <div>
            <li>
              <div class="item">
                <div class="tit">
                  <div>总工程师</div>
                  <div>意见</div>
                </div>
                <div class="con">
                  <div style="margin-top: 100px;display: flex;"><span style="flex: 1;">签字</span> <span style="flex: 1;">
                      日期</span>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item">
                <div class="tit">
                  <div>纪检领导</div>
                  <div>意见</div>
                </div>
                <div class="con">
                  <div style="margin-top: 100px;display: flex;"><span style="flex: 1;">签字</span> <span style="flex: 1;">
                      日期</span>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item">
                <div class="tit">
                  <div>(分管副总)</div>
                  <div>意见</div>
                </div>
                <div class="con">
                  <div style="margin-top: 100px;display: flex;"><span style="flex: 1;">签字</span> <span style="flex: 1;">
                      日期</span>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item">
                <div class="tit">
                  <div>(监管)</div>
                  <div>总经理</div>
                </div>
                <div class="con">
                  <div style="margin-top: 100px;display: flex;"><span style="flex: 1;">签字</span> <span style="flex: 1;">
                      日期</span>
                  </div>
                </div>
              </div>
            </li>
          </div>
        </ul>
      </div>
    </body>

    </html>

     

  • 相关阅读:
    2019春第八周作业
    2019春第七周作业
    第六周作业
    币值转换
    打印沙漏
    秋季学期学习总结
    人生影响最大的三位老师
    自我介绍
    2018秋季学习总结
    自己
  • 原文地址:https://www.cnblogs.com/yadi001/p/14836932.html
Copyright © 2020-2023  润新知