使用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下载出来的,比较多。不放上来了,放网盘,需要的自己下载。
下载地址:点击下载
尽情的偷吧
牛逼
拿走不谢。嘻嘻
.....