HTML5制作查询页面实例-html教程-PHP中文网

首页

web前端

html教程

HTML5制作查询页面实例

May 16, 2018 am 11:10 AM

h5 html5 实例

本篇文章主要介绍HTML5制作查询页面的一个小案例，感兴趣的朋友参考下，希望对大家有所帮助。

代码如下：

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
    &lt;title&gt;资格查询&lt;/title&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;bootstrap/css/bootstrap.css&quot;&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;bootstrap/js/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;bootstrap/js/bootstrap.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p class=&quot;panel panel-warning&quot;&gt;
        &lt;p class=&quot;panel-heading &quot; style=&quot;background: #d9534f; color: #ffffff&quot;&gt;
            &lt;span class=&quot;glyphicon glyphicon-th-large&quot; style=&quot;margin-right: 10px&quot; /&gt;资格查询
        &lt;/p&gt;
    &lt;/p&gt;
    &lt;form&gt;
    &lt;p class=&quot;container&quot;&gt;
        &lt;p class=&quot;row&quot;&gt;
            &lt;p class=&quot;col-md-12&quot;&gt;
                &lt;p class=&quot;input-group  &quot;&gt;
                    &lt;!--&lt;span class=&quot;input-group-addon&quot;&gt;账 号&lt;/span&gt;--&gt;
                    &lt;input type=&quot;text&quot; name=&quot;txtUserId&quot; class=&quot;form-control&quot; maxlength=&quot;20&quot; placeholder=&quot;输入帐号&quot; /&gt;
                    &lt;span class=&quot;input-group-addon&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-search&quot; style=&quot;margin-right: 10px&quot;/&gt;
                    &lt;a href=&quot;query.html?action=query&quot;&gt;查询数据&lt;/a&gt;&lt;/span&gt;
                &lt;/p&gt;
            &lt;/p&gt;
        &lt;/p&gt;
    &lt;/p&gt;
    &lt;/form&gt;
    &lt;ul class=&quot;nav nav-pills nav-stacked   nav-pider&quot;&gt;
        &lt;br&gt;
        &lt;li class=&quot;bg-warning&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-user&quot; style=&quot;margin-right: 10px&quot;&gt;
        &lt;/span&gt;账号&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;bg-warning&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-list-alt&quot; style=&quot;margin-right: 10px&quot;&gt;
        &lt;/span&gt;昵称&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;bg-warning&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-comment&quot; style=&quot;margin-right: 10px&quot;&gt;
        &lt;/span&gt;微信&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;bg-warning&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-phone&quot; style=&quot;margin-right: 10px&quot;&gt;
        &lt;/span&gt;手机&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;bg-warning&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-star&quot; style=&quot;margin-right: 10px&quot;&gt;
        &lt;/span&gt;当前等級&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;bg-warning&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-tag&quot; style=&quot;margin-right: 10px&quot;&gt;
        &lt;/span&gt;资格&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;bg-warning&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-credit-card&quot; style=&quot;margin-right: 10px&quot;&gt;
        &lt;/span&gt;信用度&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/p&gt;
    &lt;p class=&quot;panel panel-warning&quot;&gt;
        &lt;p class=&quot;panel-body&quot;&gt;
            &lt;p class=&quot;text-center&quot; style=&quot;background: #FFF; margin-top: 10px&quot;&gt;
                &lt;a href=&quot;index.php&quot;&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; style=&quot;width: 80%&quot;&gt;
                        &lt;span class=&quot;glyphicon glyphicon-home&quot; style=&quot;margin-right: 10px&quot; /&gt;返回首頁&lt;/button&gt;
                &lt;/a&gt;
            &lt;/p&gt;
        &lt;/p&gt;
    &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

登录后复制