地铁查询阶段四把查询jsp页面再次更新了一下使查询页面看起来更加的舒适。-526互联

新设计的地铁查询页面代码：

chaxun-01-1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<jsp:useBean id="dao" class="DAO.dao"></jsp:useBean>
<jsp:useBean id="dbutil" class="DBUTIL.dbutil"></jsp:useBean>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>北京地铁信息查询页面</title>
<style type="text/css">
/*设置超链接样式*/
table {
border-collapse: collapse;
border-spacing: 0;
}

a {
color: #ffffff;
text-decoration:none;
font-family:"幼圆";/*设置字体*/
font-size:18px;/*设置字体大小*/
font-weight:5px;/*调整字体粗细*/

}

a:hover {
color:#f56f2c;

font-size: 18px;
}

a:visited {
color: #5086a5;
font-size: 12px;
}
/*整个tab层居中，宽度为600px*/
#tabDiv {
width: 600px;
margin: 1em auto;
padding-bottom: 10px;
border-right: #ffffff 1px solid;
border-top: #ffffff 1px solid;
border-left: #ffffff 1px solid;
border-bottom: #ffffff 1px solid;
background-color:#fffef9 ;

}
/*tab头的样式*/
#tabsHead {

height: 226px;
background-color:#9bc1d2 ;

}
/*已选tab头（超链接）的样式*/
.curtab {
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
border-right: #b2c9d3 1px solid;
font-weight: bold;
float: left;
cursor: pointer;

}
/*未选tab头（超链接）的样式*/
.tabs {
border-right: #c1d8e0 1px solid;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
font-weight: normal;
float: left;
cursor: pointer;
}

li {

font-family:"幼圆";/*设置字体*/
font-size: 18px;
font-weight: 666;
color:#494949;

}
.title {
float: right;

font-size: 24px;
font-weight: 500;
font-family:"幼圆";/*设置字体*/
color:#ffffff;
}

.ziti {

font-size: 18px;
font-weight: 666;
font-family:"幼圆";/*设置字体*/
color:#494949;
}
.ziti2 {

font-size: 23px;
font-weight: 666;
font-family:"幼圆";/*设置字体*/
color:#494949;
}
.ziti3 {

font-size: 18px;
font-weight: 666;
font-family:"幼圆";/*设置字体*/
color:#000000;
}
button { /* 按钮美化 */
width: 200px; /* 宽度 */
height: 40px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 5px; /* 边框半径 */
background: #9bc1d2; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: "幼圆"; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 17px; /* 字体大小 */
}
button:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #5599FF;
}

.select{
background:#fafdfe;
height:31px;
width:200px;
line-height:28px;
border:1px solid #9bc0dd;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.div_foot {
position: absolute;
height: 50px;
text-align: center;
line-height: 50px;
width: 100%;
}
</style>

</head>
<body>

</div>
<p></p><br>

</div>

<div style="border-radius:30px;border:5px solid #9bc1d2;width:700px;height:380px;position: absolute;right:80px;">
<iframe id="myIframe1" name="hideIframe1" style="" src="chaxun-02.jsp" frameborder="0" width="100%" height="100%"></iframe>
</div>
<p> </p>
<p> </p>
<h1 class="ziti2"> 请选择你想要查询的地铁线路 </h1>
<p> </p>
<form action="chaxun-02.jsp" method="post" target="hideIframe1" >
<p> <select name="lineid" class="select" >
<option value="1"selected>一号线</option>
<option value="2">二号线</option>
<option value="4">四号线</option>
<option value="5">五号线</option>
<option value="6">六号线</option>
<option value="7">七号线</option>
<option value="8">八号线</option>
<option value="9">九号线</option>
<option value="10">十号线</option>
<option value="13">十三号线</option>
<option value="14">十四号线</option>
<option value="15">十五号线</option>
</select><br></p>
<p> <button type="submit" id="id_submit" name="nm_submit" value="提交">查询</button></p>
</form>

</div>

<div style="border-radius:30px;border:5px solid #9bc1d2;width:700px;height:380px;position: absolute; right:80px;">
<iframe id="myIframe2" name="hideIframe2" style="" src="chaxun-03.jsp" frameborder="0" width="100%" height="100%"></iframe>
</div>
<p> </p>
<p> </p>
<h1 class="ziti2"> 请输入你想要查询的站点 </h1>
<p> </p>
<form action="chaxun-03.jsp " method="get" id="form2" target="hideIframe2" >
<p>
<input type="text"name="station"class="select">
</p>
<p> <button type="submit" value="查询">查询</button></p>
</form>
</div>

</div>
<p> </p>
<form action="chaxun-04.jsp" method="get" id="form3" target="hideIframe3">
<table border="0" style="width: 30%; height: 300px;float:left">
<tr>
<td class ="ziti"> </td>
</tr>