表格、input样式代码-考核_表格 input-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44366972/article/details/99088282

本文展示了一个使用HTML和jQuery构建的校园信息管理系统的界面设计，包括校区信息的输入、展示和基本操作如新增、保存和删除。系统采用响应式设计，通过jQuery实现了表格行的鼠标悬停效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>