//Index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>首頁</title>
<style>
*{
padding: 0 ;
margin: 0 ;
font-size: 16px;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color: blue;
}
li{
list-style: none;
}
.top{
width: 100%;
height: 80px;
line-height: 40px;
margin-left: 4px;
}
.middle{
width: 100%;
height: 80%;
margin-left: 4px;
}
.middle h3{
line-height: 40px;
}
.bottom{
width: 100%;
height: 10%;
line-height: 40px;
}
.w{
width: 1200px;
margin: 0 auto;
}
.index{
width: 1200px;
height: 1100px;
}
.fl{
float: left;
}
.fr{
float: right;
}
.left{
height:1000px;
width:200px;
}
.right{
width: 990px;
height: 1000px;
border: 2px solid blue;
box-shadow: -2px -2px 24px 1px;
background: #ecf3fb;
}
.right p{
font-size: 36px;
margin-left:80px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="index w">
<div>
<iframe src="../Iframe/left.html" height="1000" width="200" scrolling="no" class="fl">
</iframe>
<div class="right fr" name="content" >
**<iframe name="mainFrame1" style="width: 100%; height: 100%;" >
</iframe>**
</div>
</div>
</div>
</body>
</html>
//left.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>left</title>
<style>
*{
padding: 0;
margin: 0;
font-size: 16px;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color: blue;
}
.left{
background: #4f9fdc;
height: 1000px;
}
.top{
width: 100%;
height: 80px;
line-height: 40px;
margin-left: 4px;
}
.middle{
width: 100%;
height: 80%;
margin-left: 4px;
}
.middle h3{
line-height: 40px;
}
.bottom{
width: 100%;
height: 10%;
line-height: 40px;
}
</style>
</head>
<body>
<div class="left">
<div class="top">
<!-- 使用者頭像 -->
<img src="" alt="">
<span>你好!使用者名!</span>
<p>歡迎登入本系統</p>
</div>
<!-- 功能子產品 -->
<div class="middle">
<div>
<h3>功能子產品管理▼</h3>
<ul>
**<a href="../Module/select.html" target="_blank" rel="external nofollow" target="mainFrame1">**
<li> >>功能子產品查詢</li>
</a>
<a href="../Module/add.html" target="_blank" rel="external nofollow" target="mainFrame1">
<li> >>功能子產品添加</li>
</a>
<a href="../Module/edit.html" target="_blank" rel="external nofollow" target="mainFrame1">
<li> >>功能子產品修改</li>
</a>
</ul>
</div>
<div>
<h3>學生資訊管理▼</h3>
<ul>
<li>
<a href="../Student/select.html" target="_blank" rel="external nofollow" target="mainFrame1">
>>學生資訊查詢
</a>
</li>
<li>
<a href="../Student/add.html" target="_blank" rel="external nofollow" target="mainFrame1">
>>學生資訊添加
</a>
</li>
<li>
<a href="../Student/edit.html" target="_blank" rel="external nofollow" target="mainFrame1">
>>學生資訊修改
</a>
</li>
</ul>
</div>
</div>
<!-- 聯系方式 -->
<div class="bottom">
<p>聯系我們:</p>
<p>QQ:1748120590</p>
</div>
</div>
</body>
</html>
//add.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td{
width: 500px;
height: 30px;
}
table td input{
height: 30px;
outline: none;
border: none;
font-size: 16px;
width: 500px;
}
table tr:last-child td input{
width: 60px;
height:24px;
cursor: pointer;
}
</style>
</head>
<body>
<h3 align="center">添加學生資訊</h3>
<form action="#" method="post">
<table rules="all" align="center">
<tr>
<th>學号</th>
<td><input type="text"></td>
</tr>
<tr>
<th>名字</th>
<td><input type="text"></td>
</tr>
<tr>
<th>身份證号</th>
<td><input type="text"></td>
</tr>
<tr>
<th>性别</th>
<td><input type="text"></td>
</tr>
<tr>
<th>學院</th>
<td><input type="text"></td>
</tr>
<tr>
<th>專業</th>
<td><input type="text"></td>
</tr>
<tr>
<th>學籍</th>
<td><input type="text"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="送出">
</td>
</tr>
</table>
</form>
</body>
</html>
//edit.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td{
width: 500px;
height: 30px;
}
table td input{
height: 30px;
outline: none;
border: none;
font-size: 16px;
width: 500px;
}
table tr:last-child td input{
width: 60px;
height:24px;
cursor: pointer;
}
</style>
</head>
<body>
<h3 align="center">修改學生資訊</h3>
<form action="#" method="post">
<table rules="all" align="center">
<tr>
<th>學号</th>
<td><input type="text"></td>
</tr>
<tr>
<th>名字</th>
<td><input type="text"></td>
</tr>
<tr>
<th>身份證号</th>
<td><input type="text"></td>
</tr>
<tr>
<th>性别</th>
<td><input type="text"></td>
</tr>
<tr>
<th>學院</th>
<td><input type="text"></td>
</tr>
<tr>
<th>專業</th>
<td><input type="text"></td>
</tr>
<tr>
<th>學籍</th>
<td><input type="text"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="送出">
</td>
</tr>
</table>
</form>
</body>
</html>
//select.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td{
text-align: center;
}
select{
width: 100px;
height: 30px;
}
input{
height: 23px;
}
</style>
</head>
<body>
<form action="#" method="post">
<h3 align="center">學生資訊一覽表</h3>
<p align="center">
<span>查詢添加:
<select name="" id="">
<option value="num">學号</option>
<option value="name">名字</option>
<option value="sex">性别</option>
<option value="age">年齡</option>
<option value="school">學院</option>
<option value="professional">專業</option>
<option value="all">全部</option>
</select>
</span>
<span>關鍵字:
<input type="text" name="" id="">
</span>
<input type="submit" value="查詢">
</p>
<table rules="all" align="center" width="900">
<tr>
<th>學号</th>
<th>名字</th>
<th>身份證号</th>
<th>性别</th>
<th>學院</th>
<th>專業</th>
<th>學籍</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p align="center">
<input type="submit" value="添加">
<input type="submit" value="修改">
<input type="submit" value="删除">
<input type="submit" value="重新整理">
</p>
</form>
</body>
</html>
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)