整合营销服务商

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

免费咨询热线：

20201119登录页面模板的制作

20201119登录页面模板的制作

绍

介绍

前面我们以及学会了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

HTML+CSS3+JS创意设计——打造炫酷滑动登录页面

**引言：探索交互之美**

在Web开发的世界里，优秀的用户体验往往始于一个精心设计的登录界面。HTML5、CSS3以及JavaScript的结合让我们能够创造出极具创意与个性化的滑动登录页面，让用户在首次接触应用时就能留下深刻印象。本篇文章将详细介绍如何利用基础的HTML+CSS3+JS技术，从零开始打造一款令人眼前一亮的滑动登录页面，并通过详细的代码实例解析，带领您领略前端交互设计的魅力。

---

### **一、搭建基础HTML结构**

**标题：** 构建骨骼——登录表单的基础布局

首先，我们需要构建一个简洁明了的HTML结构，包括用户名输入框、密码输入框、登录按钮以及可选的注册链接。为了实现滑动效果，我们还将引入一个容器元素来包裹整个登录区域。

```html

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title>滑动登录页面</title>

<!-- 引入外部CSS和JS文件 -->

<link rel="stylesheet" href="styles.css">

<script src="scripts.js" defer></script>

</head>

<body>

<div id="login-slider">

<form action="#" class="login-form">

<input type="text" placeholder="用户名" required>

<input type="password" placeholder="密码" required>

<button type="submit">登录</button>

<a href="#">忘记密码？</a>

<a href="#">立即注册</a>

</form>

</div>

</body>

</html>

```

---

### **二、CSS3魔法——样式与动画**

**标题：** 点缀肌肤——赋予登录表单灵动之感

接下来，我们将使用CSS3为登录表单添加样式，并利用`@keyframes`规则定义滑动动画效果。同时，我们还需要保证登录表单在不同设备上具有良好的响应式布局。

```css

/* styles.css */

body {

margin: 0;

background-color: #f0f0f0;

}

#login-slider {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 300px;

height: auto;

background-color: white;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

overflow: hidden;

}

.login-form {

display: flex;

flex-direction: column;

padding: 20px;

animation: slideIn 1s ease-in-out forwards;

}

/* 定义滑动动画 */

@keyframes slideIn {

0% {

transform: translateY(100%);

}

100% {

transform: translateY(0);

}

}

/* 登录表单元素样式 */

input[type="text"],

input[type="password"] {

margin-bottom: 10px;

padding: 10px;

border: none;

border-radius: 5px;

}

button {

cursor: pointer;

background-color: #007bff;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

text-transform: uppercase;

font-weight: bold;

}

/* 响应式布局 */

@media screen and (max-width: 768px) {

#login-slider {

width: 90%;

}

}

```

---

### **三、JavaScript增强交互**

**标题：** 赋予灵魂——用JavaScript实现滑动触发与验证逻辑

现在我们要借助JavaScript来控制登录表单的滑动行为，例如当用户点击某个链接或者页面加载完成后自动触发滑动动画。同时，可以增加一些简单的表单验证功能。

```javascript

// scripts.js

document.addEventListener('DOMContentLoaded', ()=> {

// 页面加载完成后执行滑动动画

const loginSlider=document.getElementById('login-slider');

loginSlider.classList.add('slide-active');

// 表单提交事件处理，此处仅为示例，实际场景下需加入真实验证逻辑

const form=document.querySelector('.login-form');

form.addEventListener('submit', (event)=> {

event.preventDefault(); // 阻止默认提交行为

const username=form.querySelector('input[type="text"]').value;

const password=form.querySelector('input[type="password"]').value;

// 实现简单验证逻辑，如为空检查

if (!username || !password) {

alert('用户名和密码不能为空!');

} else {

// 这里可以替换为真实的登录请求逻辑

console.log('正在登录...', username, password);

}

});

});

```

---

### **四、创意无限——拓展与优化**

**标题：** 持续创新——更多滑动登录页面的设计思路与实践

除了上述基本的滑动登录形式，还可以进一步丰富设计，比如：

- 添加进度条指示登录滑动完成度；

- 使用CSS变量实现自定义主题切换；

- 结合SVG图标增加视觉吸引力；

- 通过IntersectionObserver API实现视口可见时自动滑动；

- 配合AJAX技术实现实时验证和无刷新登录。

---

**结语：**

通过这次对HTML+CSS3+JS组合技术的探索，我们不仅成功地制作出了一个富有创意的滑动登录页面，还展现了前端技术在交互设计中的无限可能性。学习并灵活运用这些基础知识，可以让您的Web应用更加生动有趣，从而更好地吸引和留住用户。持续关注前端技术的最新发展，不断挑战自我，用代码书写更美好的Web世界。

上效果图：

这是一个用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添加了一个窗口自适应居中的效果。


在线咨询
上一篇：HTML表单基础知识
下一篇：网页全屏与锁屏显示效果

您的项目需求

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

推荐阅读
友情链接 石家庄看香高人 开远市 新罗区 施秉县 保靖县 金湖县 襄樊 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com   www.hmttv.cn
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服