HTML5制作查询页面实例

2020-03-24 18:11:19

字体：大中小

来源：转载

供稿：网友

本篇文章主要介绍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>

相关推荐：

如何利用JqueryAjax+php制作简单注册登录页面

vue-baidu-map实现进入页面后自动定位方法详解

Vue页面右上角实现悬浮隐藏菜单栏步骤详解

以上就是HTML5制作查询页面实例的详细内容，更多请关注其它相关文章！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：如何制作一个简单的HTML登录页面（附代码）

下一篇：HTML5原生支持Base64编码解码