本篇文章主要介绍HTML5制作查询页面的一个小案例，感兴趣的朋友参考下，希望对大家有所帮助。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>资格查询</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<p class="panel panel-warning">
<p class="panel-heading " style="background: #d9534f; color: #ffffff">
<span class="glyphicon glyphicon-th-large" style="margin-right: 10px" />资格查询
</p>
</p>
<form>
<p class="container">
<p class="row">
<p class="col-md-12">
<p class="input-group ">
<!--<span class="input-group-addon">账 号</span>-->
<input type="text" name="txtUserId" class="form-control" maxlength="20" placeholder="输入帐号" />
<span class="input-group-addon"><span class="glyphicon glyphicon-search" style="margin-right: 10px"/>
<a href="query.html?action=query">查询数据</a></span>
</p>
</p>
</p>
</p>
</form>
<ul class="nav nav-pills nav-stacked nav-pider">
<br>
<li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-user" style="margin-right: 10px">
</span>账号</a></li>
<li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-list-alt" style="margin-right: 10px">
</span>昵称</a></li>
<li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-comment" style="margin-right: 10px">
</span>微信</a></li>
<li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-phone" style="margin-right: 10px">
</span>手机</a></li>
<li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-star" style="margin-right: 10px">
</span>当前等級</a></li>
<li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-tag" style="margin-right: 10px">
</span>资格</a></li>
<li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-credit-card" style="margin-right: 10px">
</span>信用度</a></li>
</ul>
</p>
<p class="panel panel-warning">
<p class="panel-body">
<p class="text-center" style="background: #FFF; margin-top: 10px">
<a href="index.php">
<button type="button" class="btn btn-success" style="width: 80%">
<span class="glyphicon glyphicon-home" style="margin-right: 10px" />返回首頁</button>
</a>
</p>
</p>
</p>
</body>
</html>相关推荐：
Atas ialah kandungan terperinci HTML5制作查询页面实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
apa itu h5
Apakah kaedah penghasilan penghasilan animasi html5?
Perbezaan antara HTML dan HTML5
Bagaimana untuk melaksanakan h5 untuk meluncur ke atas dan memuatkan halaman seterusnya di sebelah web
Alat biasa untuk ujian perisian
Apakah perbezaan antara webstorm dan idea?
penggunaan klonenod
Nombor telefon mudah alih maya untuk menerima kod pengesahan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
