Maison  >  Article  >  interface Web  >  Exemple de création de page de requête HTML5

Exemple de création de page de requête HTML5

墨辰丷
墨辰丷original
2018-05-16 11:10:196644parcourir

Cet article présente principalement un petit cas de création d'une page de requête en HTML5. Les amis intéressés peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Le code est le suivant :

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

Recommandations associées :

Comment utiliser JqueryAjax+php pour créer une page de connexion d'inscription simple

vue-baidu-map Explication détaillée de la méthode de positionnement automatique après être entré dans la page

Explication détaillée des étapes pour réaliser la barre de menu flottante cachée dans le coin supérieur droit de la page Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn