<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.box-top-xq-btn{
border: 1px solid;
height: 60px;
padding: 2%;
}
.box-top-xq-btn-p{
float: left;
line-height: 35px;
}
.box-top-xq-btn-p p{
font-size: x-large;
}
.box-top-xq-btn-3btn{
float: right;
line-height: 80px;
}
.box-top-xq-input{
padding: 2%;
border: 1px solid;
height: 30px;
}
.box-top-xq-input-inbox{
float: left;
width: 25%;
}
.box-top-xq-input-inbox input{
border: 1px solid #C3CED9;
border-radius: 5px 5px 5px 5px;
font-size: 14px;
height: 31px;
line-height: 31px;
margin-right: 10px;
padding: 0;
}
.box-ctn-xq-list-table{
padding: 2%;
border: 1px solid;
height: 200px;
}
.box-ctn-xq-list-table-table-inf{
border-collapse: collapse;
width: 100%;
margin: 0 auto;
color: #676767;
}
.box-ctn-xq-list-table-table-inf th{
background-color: #f2f2f2;
height: 50px;
width: 492.15px;
}
.box-ctn-xq-list-table-table-inf td{
height: 40px;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#box-ctn-xq-list-table-table-inf-tbody tr").hover(
function() {
$(this).css("background", "#a5e5aa"); //鼠标移动上去的颜色
},
function() {
$(this).css("background", "#f5f5dc1a"); //鼠标离开的颜色
}
);
});
</script>
</head>
<body>
<div class="body-box">
<div class="box-top-xq-btn">
<div class="box-top-xq-btn-p">
<p>校区信息</p>
</div>
<div class="box-top-xq-btn-3btn">
<button>新增</button>
<button type="button" disabled="disabled">保存</button>
<button type="button" disabled="disabled">删除</button>
</div>
</div>
<div class="box-top-xq-input">
<div class="box-top-xq-input-inbox">
<span>校区名称</span>
<input type="" name="">
</div>
<div class="box-top-xq-input-inbox">
<span>校区简称</span>
<input type="" name="">
</div>
<div class="box-top-xq-input-inbox">
<span>通讯地址</span>
<input type="" name="">
</div>
<div class="box-top-xq-input-inbox">
<span>邮政编码</span>
<input type="" name="">
</div>
</div>
<div class="box-ctn-xq-list-table">
<table class="box-ctn-xq-list-table-table-inf">
<thead>
<tr>
<th>序号</th>
<th>校区名称</th>
<th>校区简称</th>
<th>通讯地址</th>
<th>邮政编码</th>
</tr>
</thead>
<tbody id="box-ctn-xq-list-table-table-inf-tbody">
<tr>
<td>1</td>
<td>南校区</td>
<td>南区</td>
<td>芙蓉园南校区6栋</td>
<td>4323422</td>
</tr>
<tr>
<td>1</td>
<td>南校区</td>
<td>南区</td>
<td>芙蓉园南校区6栋</td>
<td>4323422</td>
</tr>
<tr>
<td>1</td>
<td>南校区</td>
<td>南区</td>
<td>芙蓉园南校区6栋</td>
<td>4323422</td>
</tr>
<tr>
<td>1</td>
<td>南校区</td>
<td>南区</td>
<td>芙蓉园南校区6栋</td>
<td>4323422</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>