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

相关阅读 >>

h5页面如何调用百度地图获取当前位置(代码)

HTML5的页面结构需要注意那些方面

h5的组织内容如何使用

HTML5超链接字体如何改颜色

HTML5是什么语言

HTML5移动端手机网站开发流程

HTML5仿微信聊天界面和朋友圈代码

关于HTML5中如何调用相机拍照并且压缩图片的示例详解

HTML5全新的网络格局

h5做出手机摇一摇功能的实现步骤

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




打赏

取消

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

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

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

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

评论

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