使用Bootstrap库

HTML代码如下：

    <!doctype html>
    <html lang="en">
    <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="b4.css">

    </head>
    <body>

       <!-- 展板 j -->
       <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-3">人力资源管理平台</h1>
            <p class="lead">XXX 作品 <span class="badge badge-danger">典藏版</span></p>
        </div>
      </div>

      <!-- 容器 -->
      <div class="container-fluid">
        
        <!-- row 12 -->
        <div class="row">
            
            <!-- col -->
            <div class="col-lg-4">
               
                <!-- 卡片 -->
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">添加一个新员工</h4>
                        <!-- 输入框 -->
                            <div class="form-group">
                                <label for="">姓名</label>
                                <input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
                            </div>
                            <div class="form-group">
                                <label for="">手机号</label>
                                <input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
                            </div>
                            <div class="form-group">
                                <label for="">地址</label>
                                <input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
                            </div>
                        <!-- 按钮 -->
                        <button type="button" name="" id="" class="btn btn-primary btn-lg btn-block">创建</button>
                    </div>
                </div>

            </div>
            <!-- shift + alt + 下 -->
            <div class="col-lg-8">
                <table class="table">
                    <thead>
                        <tr>
                            <!-- ctrl + alt + 下 -->
                            <th>表格行</th>
                            <th>表格行</th>
                            <th>表格行</th>
                            <th>表格行</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>数据</td>
                            <td>数据</td>
                            <td>数据</td>
                            <td>数据</td>
                        </tr>
                        <tr>
                            <td>数据</td>
                            <td>数据</td>
                            <td>数据</td>
                            <td>数据</td>
                        </tr>
                        <tr>
                            <td>数据</td>
                            <td>数据</td>
                            <td>数据</td>
                            <td>数据</td>
                        </tr>
                        <tr>
                            <td>数据</td>
                            <td>数据</td>
                            <td>数据</td>
                            <td>数据</td>
                        </tr>

                    </tbody>
                </table>
            </div>

        </div>

     </div>
      
     </body>
     </html>

CCS代码是从Bootstrap下载出来的，比较多。不放上来了，放网盘，需要的自己下载。
下载地址：点击下载

Last modification：September 21st, 2019 at 04:00 pm
© 允许规范转载
If you think my article is useful to you, please feel free to appreciate