最近公司要求研发一个手机适应的HTML页面,所以采用了BootStrap框架,页面很简单,就是根据用户输入的四个值,发送AJAX请求,去调用webservice接口得到json数据,把数据通过.innerHTML方法追加到id为neirong的div中,作为一个表格显示在下方,其中表格也是需要带class属性,带有BootStrap的样式。
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<title>信息查询</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#all{
padding-top: 30px;
width: 80%;
margin: auto;
}
#gonggao{
padding: 10px;
border: solid 0px gainsboro;
border-radius: 10px;
}
#tupian{
margin-top:10px;
text-align:center;
}
#gonggao p{
padding-left: 20px;
}
#neirong{
margin-top: 20px;
padding: 10px 45px 10px 15px;
border: solid 0px gainsboro;
border-radius: 10px;
}
#neirong button{
margin: 5px 20px;
}
#buttom{
text-align: center;
padding: 10px;
margin-top: 20px;
height: 60px;
white-space:nowrap;
}
a{
padding-left: 2%;
}
</style>
</head>
<body>
<div id="all">
<div id="gonggao">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" >ck:</label>
<div class="col-sm-10