本篇文章主要介绍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>相关推荐：
商务 新闻 新闻中心 blog 博客 蓝色 css3动画 bootstrap html5 手机 响应式 news 大图 幻灯 滚动 案例 展示 科技 互联网 网站制作 平面设计 印刷 单页
89
以上就是HTML5制作查询页面实例的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
510
