整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

简单小程序：登录页面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    /*总体的样式*/
    <style>
    	/*盒子样式*/
        #box{
            width: 350px; //宽
            height: 450px; //高
            border: 1px solid black; //边框
            border-radius: 10px; //边框弧度
            font-family: 黑体; //字体
            letter-spacing:8px; //段间距
            word-spacing: 10px; //字间距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            color: darkgray; //颜色
        }
        /*class选择器*/
        .box_a{
            width: 50px; //宽
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景图片
            background-repeat: no-repeat; // 是否平铺
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

绍

介绍

前面我们以及学会了Bootstrap框架和jQuery库的基本使用方法，并且已经把这两个软件包整合到了我们的TFPHP框架里面，接下来我们就可以使用它们去制作用户管理系统的视图模板了。

用户管理系统包含几个主页模板：

1）用户信息表

2）用户登录页面

3）用户注册页面

4）个人资料修改

5）登录密码重置

6）用户头像上传

7）安全问题设置

8）绑定邮箱设置

9）忘记密码页面

页面比较多，我们一点点地设计。万事开头难，福哥今天下带着大家完成先完成第一个表单页面——用户登录页面。

用户登录页面

HTML

登录页面的html部分包括一个页头和一个表单。

<div class="wrapper">

    <div class="wrapper-header">

        <!-- top bar begin -->
        <div class="row topbar">
            <div class="navbar navbar-text">
                TFUMS v1.0 - TONGFU.net
            </div>
            <ul class="nav ml-md-auto">
                <li class="nav-item"><a href="" class="nav-link">首页</a></li>
                <li class="nav-item"><a href="" class="nav-link">登录</a></li>
                <li class="nav-item"><a href="" class="nav-link">注册</a></li>
            </ul>
        </div>
        <!-- top bar end -->

    </div>

    <div class="wrapper-content">

        <!-- login form begin -->
        <div class="row login-form">
            <div class="col-sm-12">
                <h3 class="text-center">登录</h3>
                <p>请输入正确的用户名和密码登录用户管理系统</p>
                <form>
                    <div class="form-group">
                        <label>用户名</label>
                        <input class="form-control" type="text" name="user" />
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input class="form-control" type="password" name="pass" />
                    </div>
                    <div class="form-group overflow-hidden">
                        <label class="float-left">
                            <input type="checkbox" name="remember" value="Y" />
                            保存登录状态
                        </label>
                        <a href="" class="float-right">忘记密码</a>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm form-control">登录</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- login form end -->

    </div>

    <div class="wrapper-footer">

    </div>

</div>

CSS

用户登录页面的CSS也是一个top bar和一个login form两个部分。

/**
 * top bar
 */
.topbar{
    padding: 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.topbar a{
    color: #333;
}
.topbar a:hover{
    color: #007bff;
}

/**
 * login form
 */
.login-form{
    margin: 0 auto;
    width: 350px;
}

讲解

用户登录页面

首先，因为这是TFUMS系统的第一个模板，所以福哥先设计了页头的样式。这个页头也会作为其他页面的共用的页头。页头使用了bs的nav样式组的样式，简化了自己写CSS的工作。

其次，表单部分使用了bs的form-group样式作为每一行表单项的容器样式，加上label和form-control简简单单就把一个漂亮的表单做出来了。

还有福哥使用浮动加清除实现了“保存登录状态”和“忘记密码”的左右布局设计。

最后，福哥给button增加了form-control样式，使按钮撑满了整个容器，看起来比较工整了。

总结

今天我们完成了第一个表单页面的模板，包括：HTML和CSS部分。有了这个基础之后，再去制作其他表单页面就容易多了。

下一课我们将尝试完成用户注册页面、忘记密码页面、登录密码重置三个页面的模板的制作。


https://m.tongfu.net/home/35/blog/512901.html

上效果图：

这是一个用ext3.2.0、js、html、css写的一个还算好看的登录界面。

源代码已上传，下载地址请点击：点击打开链接

其主要难点在如何使用extjs来画一个界面，接下来我们就主要看一下其中的html和js吧：


  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>登录界面</title>
  7. <link rel="stylesheet" type="text/css" href="ext3.2.0/resources/css/ext-all.css"/>
  8. <script type="text/javascript" src="ext3.2.0/adapter/ext/ext-base.js"></script>
  9. <script type="text/javascript" src="ext3.2.0/ext-all.js"></script>
  11. <script type="text/javascript" src="login.js"></script>
  12. <script type="text/javascript" src="loginToDo.js"></script>
  14. <link rel="stylesheet" type="text/css" href="login.css"/>
  15. </head>
  16. <body onkeydown="keyLogin(event);">
  17. </body>
  18. </html>

这里面主要是导入页面所需的js和css文件，当然还有一个亮点就是body标签上的 onkeydown事件属性，主要用于监听键盘实现我们js中的enter键提交功能。然后看一下extjs的语言风格吧：


  2. Ext.onReady(function () {
  4. // 创建“登录”面板
  5. var loginPanel = new Ext.Panel({
  6. // 设置面板的位置、宽高、样式
  7. // 注意：此处我用的是相对布局relative（用于比较两者的区别）
  8. id: 'loginPan',
  9. x: 363,
  10. y: 0,
  11. width: 396,
  12. height: 480,
  13. baseCls: '',
  14. defaults: {
  15. border: false
  16. },
  17. // 添加面板里面的物品
  18. items: [
  19. {
  20. // 第一件：logo图
  21. id: 'loginLogo',
  22. height: 160,
  23. frame: false,
  24. bodyStyle: 'padding-top:10px',
  25. html: '<img src="images/fly_icon.png">'
  26. },
  27. {
  28. // 第二件：登录的表单
  29. id: 'loginForm',
  30. defaultType: 'textfield',
  31. frame: false,
  32. defaults: {
  33. allowBlank: false
  34. },
  35. // 添加表单里面的物品：两个输入框
  36. items: [
  37. {
  38. id: "username",
  39. cls: "text_field",
  40. inoutType: 'text',
  41. width: 330,
  42. height: 28,
  43. blankText: '账号不能为空',
  44. emptyText: '请输入账号',
  45. },
  46. {
  47. id: "password",
  48. cls: "text_field",
  49. inputType: 'password',
  50. width: 330,
  51. height: 28,
  52. emptyText: '请输入密码',
  53. blankText: '密码不能为空',
  54. }]
  55. },
  56. {
  57. // 第三件：忘记密码
  58. id: 'loginForget',
  59. html: "<a href='forget_pwd.html' target='_blank'>忘记密码？</a>",
  60. },
  61. {
  62. // 第四件：登录按钮
  63. id: 'loginBtn',
  64. html: '<button id="btn_login">马上登录</button>',
  65. }
  66. ],
  67. });
  69. // 创建“注册”面板
  70. var registerPanel = new Ext.Panel({
  71. // 设置面板的位置、宽高、样式
  72. // 注意：此处我用的是绝对布局absolute（用于比较两者的区别）
  73. id: 'registerPan',
  74. x: 0,
  75. y: 46,
  76. width: 800,
  77. height: 389,
  78. baseCls: '',
  79. layout: 'absolute',
  80. defaults: {
  81. border: false
  82. },
  83. // 添加面板里面的物品
  84. items: [
  85. {
  86. // 第一件：标题
  87. id: 'registerTitleLabel',
  88. xtype: 'label',
  89. x: 47,
  90. y: 50,
  91. text: '还没有账号？',
  92. }, {
  93. // 第二件：正文
  94. id: 'registerContentLabel',
  95. xtype: 'label',
  96. x: 47,
  97. y: 135,
  98. text: '这是在注册面板下面的正文内容。里面的内容可以随便写，比如当前我们再一个窗口下面建立了两个面板。而两个面板的布局是分别用相对布局和绝对布局来实现的。相比较而言，我觉得用绝对布局会简单粗暴，更直接，更方便。总之，你们自己体会一下吧。',
  99. }, {
  100. // 第三件：注册按钮
  101. id: 'registerBtn',
  102. xtype: 'button',
  103. x: 47,
  104. y: 280,
  105. html: '<button id="btn_register" >马上注册</button>'
  106. }],
  108. });
  110. // 创建窗口，从而让内容达到居中效果
  111. var centerWindow = new Ext.Window({
  112. baseCls: '',
  113. width: 800,
  114. height: 480,
  115. layout: 'absolute',
  116. closable: false,
  117. draggable: false,
  118. resizable: false,
  119. shadow: false,
  120. border: false,
  121. items: [registerPanel, loginPanel],
  122. });
  124. // 显示窗口
  125. centerWindow.show();
  127. // 添加浏览器缩放自动居中效果
  128. Ext.EventManager.onWindowResize(function () {
  129. centerWindow.center();
  130. });
  131. });

这里要说的是：1、注意给属性加标记，能用id就用id，cls只是一个封装过的class，和原生的class还是有区别的，比如给一个cls元素的height、padding定义样式并不起作用。详见：关于extjs中的cls ≠ class

2、在ext中建议用绝对定位，由于它底层是一个个的table、div块，如果用相对定位的话偶尔是有偏差的，所以还是绝对定位方便直接啊。

3、window自带居中效果，可以利用这一点让元素在屏幕中居中。但是当浏览器缩放的时候，这个window并不会动，每次都需要重新刷新一下才会改变一下。所以，在以上代码的最后我们用给这个centerWindow添加了一个窗口自适应居中的效果。


在线咨询
上一篇：JavaScript：history和location对象、JS设计模式系统讲解与应用
下一篇：微信开放JS SDK，再次给浏览器们上了一课

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 石家庄看香高人 江南区 治多县 上甘岭区 电白县 达州 洪雅县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com   www.hmttv.cn
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服