Home > Article > Web Front-end > HTML5 query page creation example

HTML5 query page creation example

墨辰丷Original: 2018-05-16 11:10:196644browse

This article mainly introduces a small case of making a query page in HTML5. Interested friends can refer to it. I hope it will be helpful to everyone.

The code is as follows:

<!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>

Related recommendations:

How to use JqueryAjax php to create a simple registration login page

##vue - Detailed explanation of the method of automatic positioning by baidu-map after entering the page

Detailed explanation of the steps to realize the floating hidden menu bar in the upper right corner of the Vue page

The above is the detailed content of HTML5 query page creation example. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of table in htmlNext article：Detailed explanation of table in html

See more

HTML5 query page creation example

Related articles