HTML5制作查询页面实例


本文摘自PHP中文网,作者墨辰?R,侵删。

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

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

<!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制作查询页面实例的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5应用-生日快乐动画的实现

解决HTML5对手机页面长按会粘贴复制禁用的方法

HTML5 新表单元素

详解HTML5头部meta标签的功能

h5同层video播放器接入实例分享

如何用HTML5中的canvas绘制渐变矩形

HTML5 地理定位

HTML5桌面通知之notification api详解

HTML5中在可拖动元素或选取的文本放置在目标区域时触发的事件ondrop

HTML5 meter标签是什么意思?HTML5 meter标签的用法及属性介绍

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...