明輝手游網(wǎng)中心:是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)!

HTML5制作查詢頁面案例

[摘要]本篇文章主要介紹HTML5制作查詢頁面的一個(gè)小案例,感興趣的朋友參考下,希望對(duì)大家有所幫助。代碼如下:<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=...
本篇文章主要介紹HTML5制作查詢頁面的一個(gè)小案例,感興趣的朋友參考下,希望對(duì)大家有所幫助。

代碼如下:

<!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">賬 號(hào)</span>-->
                    <input type="text" name="txtUserId" class="form-control" maxlength="20" placeholder="輸入帳號(hào)" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-search" style="margin-right: 10px"/>
                    <a href="query.html?action=query">查詢數(shù)據(jù)</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>賬號(hào)</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>手機(jī)</a></li>
        <li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-star" style="margin-right: 10px">
        </span>當(dāng)前等級(jí)</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>

相關(guān)推薦:

如何利用JqueryAjax+php制作簡(jiǎn)單注冊(cè)登錄頁面

vue-baidu-map實(shí)現(xiàn)進(jìn)入頁面后自動(dòng)定位方法詳解

Vue頁面右上角實(shí)現(xiàn)懸浮隱藏菜單欄步驟詳解

以上就是HTML5制作查詢頁面實(shí)例的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。