精华内容
下载资源
问答
  • 使用Vue写一个登录页面

    万次阅读 多人点赞 2018-07-31 11:24:20
    上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。 1.构建项目的目录 2.App.vue <template> <div id="app"> <router-view/> &...

    上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。

    1.构建项目的目录

    2.App.vue

    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <script>
      export default {
        name: 'App'
      }
    </script>
    

    main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    //自己写的样式
    import './style/theme.css'
    import './style/characters.css'
    
    // 注册element-ui
    Vue.use(ElementUI)
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

    theme.css

    body {
      padding: 0;
      margin:0;
      font-family: "Microsoft YaHei UI Light";
    }
    
    .outer_label {
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      height: 220px;
      background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */
      /*background-color: #000099;*/
      text-align: center;
      filter: brightness(1.4);
    }
    .inner_label {
      position: absolute;
      left:0;
      right: 0;
      bottom: 0;
      top:0;
      margin: auto;
      height: 50px;
    }
    .qxs-icon {
      height: 40px;
      width: 90%;
      margin-bottom: 5px;
      padding-left: 10%;
      border: 0;
      border-bottom: solid 1px lavender;
    }
    

    character.css

    .text-size12px{
      font-size: 12px;
    }
    .text-size14px{
      font-size: 14px;
    }
    .text-size16px{
      font-size: 16px;
    }
    .float-right {
      float: right;
    }
    .item-color {
      color: #848487;
    }
    

    index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    // import HelloWorld from '@/components/HelloWorld'
    import Login from '@/components/login/Login'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Login',
          component: Login
        }
      ]
    })
    

    Login.vue

    <template>
      <div>
        <div class="outer_label">
          <img class="inner_label login_logo" src="../../assets/logo.png">
        </div>
        <div class="login_form">
          <input type="text"  class="qxs-ic_user qxs-icon"  placeholder="用户名" v-model="userName">
          <input type="text"  class="qxs-ic_password qxs-icon"  placeholder="密码" v-model="password">
          <!--<button class="login_btn el-button el-button&#45;&#45;primary is-round" type="primary" round>登录</button>-->
          <el-button class="login_btn" @click.native="login" type="primary" round :loading="isBtnLoading">登录</el-button>
          <div style="margin-top: 10px">
            <span style="color: #000099;" @click="login">司机账号登陆</span><span style="float: right;color: #A9A9AB">忘记密码?</span>
          </div>
        </div>
      </div>
    </template>
    
    
    
    <script>
    //  import { userLogin } from '../../api/api';
    
      export default {
        data() {
          return {
            userName: '',
            password: '',
            isBtnLoading: false
          }
        },
        created () {
          if(JSON.parse( localStorage.getItem('user')) && JSON.parse( localStorage.getItem('user')).userName){
            this.userName = JSON.parse( localStorage.getItem('user')).userName;
            this.password = JSON.parse( localStorage.getItem('user')).password;
          }
        },
        computed: {
          btnText() {
            if (this.isBtnLoading) return '登录中...';
            return '登录';
          }
        },
        methods: {
          login() {
            if (!this.userName) {
              this.$message.error('请输入用户名');
              return;
            }
            if (!this.password) {
              this.$message.error('请输入密码');
              return;
            }
    
          }
        }
      }
    </script>
    <style>
      .login_form {
        padding-top: 10%;
        padding-left: 10%;
        padding-right: 10%;
      }
      .qxs-ic_user {
        background: url("../../assets/login/ic_user.png") no-repeat;
        background-size: 13px 15px;
        background-position: 3%;
      }
      .qxs-ic_password {
        background: url("../../assets/login/ic_password.png") no-repeat;
        background-size: 13px 15px;
        background-position: 3%;
        margin-bottom: 20px;
      }
      .login_logo {
        height: 100%;
      }
      .login_btn {
        width: 100%;
        font-size: 16px;
        background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */
        filter: brightness(1.4);
      }
    </style>
    

    ic_password.png

    ic_user.png

    logo.png

     

    3.根据npm run dev 命令启动,启动完成之后会有个链接,访问链接就直接可以看到下面页面:

     

    问题交流群,不定期分享各种技术文档:

    QQ群号:464512055

    群二维码:

    这是一个神器的二维码,扫描之后你会少掉一块钱。

     

    展开全文
  • 简单登录页面代码

    万次阅读 多人点赞 2016-12-06 10:18:50
    简单登录HTML

    这是一个简单的静态的html页面登录图片,之前写的,验证码方面没有搞懂,这里我重新参考了这里,但是部分功能还没有完善。仅供参考

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>静态页面登录测试</title> 
     
     <script language="javascript">
     window.onload = function() {
      createCode()
     }
     var code; //在全局定义验证码 
     function createCode() {
      code = "";
      var codeLength = 4; //验证码的长度 
      var checkCode = document.getElementById("code");
      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
       'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数 
      for(var i = 0; i < codeLength; i++) { //循环操作 
      var index = Math.floor(Math.random() * 36); //取得随机数的索引(0~35) 
       code += random[index]; //根据索引取得随机数加到code上 
      }
      checkCode.value = code; //把code值赋给验证码 
     }
     //校验验证码 
    function validateLogin(){
        var sUserName = document.frmLogin.username.value ;
        var sPassword = document.frmLogin.password.value ;
        var inputCode = document.frmLogin.text_code.value;
        /*var sinputCode =document.frmLogin.inputcode.value ;  */
        if ((sUserName.length <= 0) || (sUserName=="")){
         alert("请输入用户名!");
         return false ;
        }
         
        if ((sPassword.length <= 0) || (sPassword=="")){
         alert("请输入密码!");
         return false ;
        }
        if ((inputCode.length<= 0) || (inputCode==NULL)){
            alert("请输入验证码!");
            return false ;
           }
       } 
      </script>
    </head>
    <body >
    <fieldset>
    <table background="images\e.jpg " width="933" height="412">
     <tr height="170">
     <td width="570px"> </td>
     <td> </td>
     </tr> 
     <tr>
    <td> </td>        
    <td><table>
    <form method ="POST" action="http://localhost:8080/test/hello.html?login=%B5%C7%C2%BC" name="frmLogin"  >
     <tr>
     <td><label for="username">用户名:</label></td>
     <td><input type="text" name="username"  id="username" placeholder="input your name" size="20" maxlength="20" /></td>
     <td > </td>
     <td> </td>
     </tr>
     <tr>
     <td><label for="password">密  码:</label></td>
     <td><input type="password" name="password" id="password" placeholder="input your password" size="20" maxlength="20" )  this.value='';" /></td>
     <td> </td>
     <td> </td>
     </tr>
     <tr>
     <td><label for="text_code">验证码:</label></td>
     <td><input type="text" size="" name="text_code" id="text_code" /></td>
     <td><input type="button" id="code" onclick="createCode()" name=""></td>
     </tr>
     <tr>
     <td><input type="checkbox" name="zlogin" value="1">自动登录</td>
     </tr>
     </table>
     </td>
      <tr>
      <td> </td>   
      <td><table>
       <tr>
      <td><input type="submit" name="login" value="登录" onClick="return validateLogin()"/></td>
      <td><input type="reset" name="rs" value="重置"></td>
      <td><input type="button" name="button" value="注册" onclick="window.location.href='https://www.w3school.com.cn/jsref/event_onfocus.asp'"></td>
      </tr>
     </tr>
     </table>
     </td>
     </table>
    </fieldset>
    </form>
     
    </body>
    </html>

    执行后如图

     

     



     

    展开全文
  • 构建 Spring Boot 项目并通过登录 DEMO 打通前后端的联系,为下一步开发打下基础。

    前面我们已经完成了前端项目 DEMO 的构建,这一篇文章主要目的如下:

    一、打通前后端之间的联系,为接下来的开发打下基础
    二、登录页面的开发(无数据库情况下)

    前言:关于开发环境

    每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text、Vim),但对我来说开发效率确实不如使用 IDE 高,所以就放弃了。不过需要修改某一代码片段时,使用编辑器还是比较便捷的。

    虽说大家可以按照自己的情况任意选择工具,但做教程只能顾及其中一种,所以不好意思了读者大人们。

    我比较习惯用 IntelliJ IDEA,在 Java 后端方面地位没得说,然而我前端也是用它做的。。。说实话没感到有什么不妥当的地方,界面什么的都和 WebStorm 差不多,只要不是只用 Eclipse 的同学,应该不会觉得别扭。

    (用 Eclipse 的同学,是时候尝试改变了 /手动狗头)

    第一篇文章也放上了 GitHub 的地址,有些小伙伴可能没看到,这里再放一遍:

    https://github.com/Antabot/White-Jotter

    追到第三篇的同学都是动手能力比较强的了,今天我测试了一下,按照项目的 README 运行基本没有问题,有兴趣的小伙伴可以搞一下,如果发现新的问题请在评论区指出,感谢。

    一、后端项目创建

    这个就很简单了。在 IDEA 中新建项目,选择 Spring Initializr,点击 Next
    在这里插入图片描述
    输入项目元数据,Next
    在这里插入图片描述
    选择 Web -> Web,Next
    在这里插入图片描述
    最后是项目名称和项目地址,Finish 后等待项目自动初始化即可。
    在这里插入图片描述
    运行 Application.java
    在这里插入图片描述
    访问 http://localhost:8080,发现弹出了错误页面,OK,这就对了,因为我们啥页面都没做啊。
    在这里插入图片描述

    二、登录页面开发

    1.关于前后端结合

    注意我们的项目是前后端分离的,这里的结合意思不是就不分离了,是如何把这俩分离的项目串起来用。

    前面提到过前后端分离的意思是前后端之间通过 RESTful API 传递 JSON 数据进行交流。不同于 JSP 之类,后端是不涉及页面本身的内容的。

    在开发的时候,前端用前端的服务器(Nginx),后端用后端的服务器(Tomcat),当我开发前端内容的时候,可以把前端的请求通过前端服务器转发给后端(称为反向代理),这样就能实时观察结果,并且不需要知道后端怎么实现,而只需要知道接口提供的功能,两边的开发人员(两个我)就可以各司其职啦。

    艾玛做一个完整的教程真不容易,遇到的每个知识点感觉都能讲一堆。上次的文章被一位老哥反问是不是太着急了,也不知道是什么意思,我自己反思可能是讲的不够细吧,这里我就再啰嗦一下讲两句 正向代理反向代理

    正向代理就是,你要访问一个网站,比如“谷弟弟”,然后发现访问不到,于是你访问了一个能访问到“谷弟弟”的代理服务器,让它帮你拿到你想浏览的页面。

    反向代理就是,你访问了一个网站,你以为它是“谷弟弟”,但其实它是“谷姐”,“谷姐”知道你其实是想找她弟,就取回“谷弟弟”的内容给你看。作为用户的你,是不知道有这个过程的,这么做是为了保护服务器,不暴露服务器的真实地址。

    知乎上有张神图可以描述这两种过程
    在这里插入图片描述

    2.前端页面开发

    Login.vue

    首先我们开发登录页面组件,右键 src\components 文件夹,New -> Vue Component,命名为 Login,如果没有 Vue Component 这个选项,可以选择新建一个 File,命名为 Login.vue 即可。代码如下:

    <template>
      <div>
          用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
          <br><br>
          密码: <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
          <br><br>
          <button v-on:click="login">登录</button>
      </div>
    </template>
    
    <script>
    
      export default {
        name: 'Login',
        data () {
          return {
            loginForm: {
              username: '',
              password: ''
            },
            responseResult: []
          }
        },
        methods: {
          login () {
            this.$axios
              .post('/login', {
                username: this.loginForm.username,
                password: this.loginForm.password
              })
              .then(successResponse => {
                if (successResponse.data.code === 200) {
                  this.$router.replace({path: '/index'})
                }
              })
              .catch(failResponse => {
              })
          }
        }
      }
    </script>
    
    

    <template> 标签中随便写了一个登录的界面, methods 中定义了登录按钮的点击方法,即向后端 /login 接口发送数据,获得成功的响应后,页面跳转到 /index。因为之前我们设置了默认的 URL,所以请求实际上发到了 http://localhost:8443/api/login

    AppIndex.vue

    右键 src\components 文件夹,新建一个 directory,命名为 home,再在 home 下新建一个 Appindex.vue ,即首页组件,这里暂时不做过多开发,先随便写个 Hello World。

    <template>
        <div>
          Hello World!
        </div>
    </template>
    
    <script>
      export default {
        name: 'AppIndex'
      }
    </script>
    
    <style scoped>
    
    </style>
    
    

    3.前端相关配置

    设置反向代理

    修改 src\main.js 代码如下:

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    // 设置反向代理,前端请求默认发送到 http://localhost:8443/api
    var axios = require('axios')
    axios.defaults.baseURL = 'http://localhost:8443/api'
    // 全局注册,之后可在其他组件中通过 this.$axios 发送数据
    Vue.prototype.$axios = axios
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    

    因为使用了新的模块 axios,所以需要进入到项目文件夹中,执行 npm install --save axios,以安装这个模块。

    配置页面路由

    修改 src\router\index.js 代码如下

    import Vue from 'vue'
    import Router from 'vue-router'
    // 导入刚才编写的组件
    import AppIndex from '@/components/home/AppIndex'
    import Login from '@/components/Login'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
      // 下面都是固定的写法
        {
          path: '/login',
          name: 'Login',
          component: Login
        },
        {
          path: '/index',
          name: 'AppIndex',
          component: AppIndex
        }
      ]
    })
    
    

    跨域支持

    为了让后端能够访问到前端的资源,需要配置跨域支持。

    config\index.js 中,找到 proxyTable 位置,修改为以下内容

        proxyTable: {
          '/api': {
            target: 'http://localhost:8443',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        }
    

    注意如果不是在最后的位置,大括号外需要添加一个逗号。

    运行项目

    执行 npm run dev,或双击 dev(start 也一样)脚本,查看登录页面效果。

    注意地址是 localhost:8080/#/login ,中间有这个 # 是因为 Vue 的路由使用了 Hash 模式,是单页面应用的经典用法,但连尤雨溪本人都觉得不太好看,所以可以在路由配置中选择使用 History 模式,但会引发一些问题,需要在后端作出处理,所以这里先不更改,之后我单独写一篇关于这个的文章。
    在这里插入图片描述
    教程的内容简化了一下,我做的是这个样子的。。。
    在这里插入图片描述
    呃,总之这个页面的功能都是一样的。

    4.后端开发

    User 类

    Login.vue 中,前端发送数据的代码段为

    .post('/login', {
                username: this.loginForm.username,
                password: this.loginForm.password
              })
    

    后端如何接收这个 JS 对象呢?我们很自然地想到在需要创建一个形式上一致的 Java 类。

    打开我们的后端项目 wj,首先在 src\main\java\com\evan\wj 文件夹(就是你自己的 web 项目的包)下,新建一个 pojo 包(package),然后新建 User类,代码如下

    package com.evan.wj.pojo;
    
    public class User {
        int id;
        String username;
        String password;
    
        public int getId() {
            return id;
        }
    
        public void setId(int id) {
            this.id = id;
        }
    
        public String getUsername() {
            return username;
        }
    
        public void setUsername(String username) {
            this.username = username;
        }
    
        public String getPassword() {
            return password;
        }
    
        public void setPassword(String password) {
            this.password = password;
        }
    }
    
    

    Result 类

    Result 类是为了构造 response,主要是响应码。新建 result 包,创建 Result 类,代码如下

    package com.evan.wj.result;
    
    public class Result {
        //响应码
        private int code;
    
        public Result(int code) {
            this.code = code;
        }
    
        public int getCode() {
            return code;
        }
    
        public void setCode(int code) {
            this.code = code;
        }
    
    }
    
    

    实际上由于响应码是固定的,code 属性应该是一个枚举值,这里作了一些简化。

    LoginController

    Controller 是对响应进行处理的部分。这里我们设定账号是 admin,密码是 123456,分别与接收到的 User 类的 usernamepassword 进行比较,根据结果返回不同的 Result,即不同的响应码。前端如果接收到成功的响应码(200),则跳转到 /index 页面。

    wj 下新建 controller 包,新建 LoginController 类,代码如下

    package com.evan.wj.controller;
    
    import com.evan.wj.result.Result;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.util.HtmlUtils;
    
    import com.evan.wj.pojo.User;
    
    import java.util.Objects;
    
    @Controller
    public class LoginController {
    
        @CrossOrigin
        @PostMapping(value = "api/login")
        @ResponseBody
        public Result login(@RequestBody User requestUser) {
        // 对 html 标签进行转义,防止 XSS 攻击
            String username = requestUser.getUsername();
            username = HtmlUtils.htmlEscape(username);
    
            if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {
                String message = "账号密码错误";
                System.out.println("test");
                return new Result(400);
            } else {
                return new Result(200);
            }
        }
    }
    
    

    这里只是为了演示前后端的交互过程,真正的登录验证要考虑更多因素,后面的文章会有详细介绍。另外教程初期对项目结构做了一些简化,实际上在 controller 里写这么多逻辑是不合理的,要尽量封装到 service 里面去。

    最后,在 src\main\resources 文件夹下找到 application.properties 文件配置端口,即加上 server.port=8443(初始应该是空白的,后期还要配置数据库等)

    5.测试项目

    同时运行前端和后端项目,访问 localhost:8080/#/login,输入用户名 admin,密码 123456
    在这里插入图片描述
    点击确定,成功进入 localhost:8080/#/index
    在这里插入图片描述
    通过这篇文章,希望大家可以直观地感受到前后端分离项目中前后端的过程,之后的功能开发基本思路就是在后端开发 Controller,在前端开发不同的组件,这个顺序可以随意。实际的项目应该是前后端人员根据功能需求约定好接口,然后齐头并进,以提高开发效率。

    接下来一段时间需要写的内容大概有以下这些:

    • 数据库的引入
    • 后端拦截器的配置
    • 部署项目时会遇到的一些坑
    • 使用 Element 辅助前端开发
    • 公共组件的开发

    顺序我再想一想,教程做的比较慢,大家可以在 GitHub 上看项目的进度。

    查看系列文章目录:
    https://learner.blog.csdn.net/article/details/88925013

    上一篇:Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目

    下一篇:Vue + Spring Boot 项目实战(四):数据库的引入

    展开全文
  • 视频 视频地址:https://www.bilibili.com/video/BV16A411H7Vm html+css实现漂亮的透明登录页面,HTML炫酷登录页面 视频录的比较急,视频的最后背景圆样式那里少加了一个border-radius: 50%;,导致没有变成圆形,...

    承蒙各位小伙伴的支持,鄙人有幸入围了《CSDN 2020博客之星》的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢!❤️ 每一票都是我坚持的动力和力量! https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743  

    作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始。

    微信公众号:AlbertYang 关注我更多精彩等你来发现!

     今天带大家,用html+css实现一个漂亮的登录页面,代码中关键部分我都做了注释,具体实现过程请看下面的视频和代码。

    视频

    视频地址:https://www.bilibili.com/video/BV16A411H7Vm

    html+css实现漂亮的透明登录页面,HTML炫酷登录页面

    视频录的比较急,视频的最后背景圆样式那里少加了一个border-radius: 50%;,导致没有变成圆形,而是正方形,在下面的代码中已更正。

    HTML

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <link rel="stylesheet" href="style.css">
    
        <title>登录:微信公众号AlbertYang</title>
    </head>
    
    <body>
        <section>
            <!-- 背景颜色 -->
            <div class="color"></div>
            <div class="color"></div>
            <div class="color"></div>
            <div class="box">
                <!-- 背景圆 -->
                <div class="circle" style="--x:0"></div>
                <div class="circle" style="--x:1"></div>
                <div class="circle" style="--x:2"></div>
                <div class="circle" style="--x:3"></div>
                <div class="circle" style="--x:4"></div>
                <!-- 登录框 -->
                <div class="container">
                    <div class="form">
                        <h2>登录</h2>
                        <form>
                            <div class="inputBox">
                                <input type="text" placeholder="姓名">
    
                            </div>
                            <div class="inputBox">
                                <input type="password" placeholder="密码">
    
                            </div>
                            <div class="inputBox">
                                <input type="submit" value="登录">
    
                            </div>
                            <p class="forget">忘记密码?<a href="#">
                                    点击这里
                                </a></p>
                            <p class="forget">没有账户?<a href="#">
                                    注册
                                </a></p>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </body>
    
    </html>

    CSS

    /* 清除浏览器默认边距,
    使边框和内边距的值包含在元素的width和height内 */
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    /* 使用flex布局,让内容垂直和水平居中 */
    
    section {
        /* 相对定位 */
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
        background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
    }
    
    /* 背景颜色 */
    
    section .color {
        /* 绝对定位 */
        position: absolute;
        /* 使用filter(滤镜) 属性,给图像设置高斯模糊*/
        filter: blur(200px);
    }
    
    /* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */
    
    section .color:nth-child(1) {
        top: -350px;
        width: 600px;
        height: 600px;
        background: #ff359b;
    }
    
    section .color:nth-child(2) {
        bottom: -150px;
        left: 100px;
        width: 500px;
        height: 500px;
        background: #fffd87;
    }
    
    section .color:nth-child(3) {
        bottom: 50px;
        right: 100px;
        width: 500px;
        height: 500px;
        background: #00d2ff;
    }
    
    .box {
        position: relative;
    }
    
    /* 背景圆样式 */
    
    .box .circle {
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
        backdrop-filter: blur(5px);
        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        /* 使用filter(滤镜) 属性,改变颜色。
        hue-rotate(deg)  给图像应用色相旋转 
        calc() 函数用于动态计算长度值 
        var() 函数调用自定义的CSS属性值x*/
        filter: hue-rotate(calc(var(--x) * 70deg));
        /* 调用动画animate,需要10s完成动画,
        linear表示动画从头到尾的速度是相同的,
        infinite指定动画应该循环播放无限次*/
        animation: animate 10s linear infinite;
        /* 动态计算动画延迟几秒播放 */
        animation-delay: calc(var(--x) * -1s);
    }
    
    /* 背景圆动画 */
    
    @keyframes animate {
        0%, 100%, {
            transform: translateY(-50px);
        }
        50% {
            transform: translateY(50px);
        }
    }
    
    .box .circle:nth-child(1) {
        top: -50px;
        right: -60px;
        width: 100px;
        height: 100px;
    }
    
    .box .circle:nth-child(2) {
        top: 150px;
        left: -100px;
        width: 120px;
        height: 120px;
        z-index: 2;
    }
    
    .box .circle:nth-child(3) {
        bottom: 50px;
        right: -60px;
        width: 80px;
        height: 80px;
        z-index: 2;
    }
    
    .box .circle:nth-child(4) {
        bottom: -80px;
        left: 100px;
        width: 60px;
        height: 60px;
    }
    
    .box .circle:nth-child(5) {
        top: -80px;
        left: 140px;
        width: 60px;
        height: 60px;
    }
    
    /* 登录框样式 */
    
    .container {
        position: relative;
        width: 400px;
        min-height: 400px;
        background: rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(5px);
        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .form {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 50px;
    }
    
    /* 登录标题样式 */
    
    .form h2 {
        position: relative;
        color: #fff;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 5px;
        margin-bottom: 30px;
        cursor: pointer;
    }
    
    /* 登录标题的下划线样式 */
    
    .form h2::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 0px;
        height: 3px;
        background: #fff;
        transition: 0.5s;
    }
    
    .form h2:hover:before {
        width: 53px;
    }
    
    .form .inputBox {
        width: 100%;
        margin-top: 20px;
    }
    
    /* 输入框样式 */
    
    .form .inputBox input {
        width: 100%;
        padding: 10px 20px;
        background: rgba(255, 255, 255, 0.2);
        outline: none;
        border: none;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        font-size: 16px;
        letter-spacing: 1px;
        color: #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    .form .inputBox input::placeholder {
        color: #fff;
    }
    
    /* 登录按钮样式 */
    
    .form .inputBox input[type="submit"] {
        background: #fff;
        color: #666;
        max-width: 100px;
        margin-bottom: 20px;
        font-weight: 600;
        cursor: pointer;
    }
    
    .forget {
        margin-top: 6px;
        color: #fff;
        letter-spacing: 1px;
    }
    
    .forget a {
        color: #fff;
        font-weight: 600;
        text-decoration: none;
    }

     

    今天的学习就到这里了,由于本人能力和知识有限,如果有写的不对的地方,还请各位大佬批评指正。有什么不明白的地方欢迎给我留言,如果想继续学习提高,欢迎关注我,每天进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,评论,点赞!!!

    展开全文
  • bootstrap3 登录页面

    万次阅读 2019-02-21 15:16:38
    bootstrap3 纯bootstrap样式登录页面,页面部署在Github上:https://www.jnnvc.com/others/login.html 为了防止图片变形,或这出现空白区域,我将图片设置为自适应百分比大小了。 欢迎加入JavaQQ交流群:774075496 ...
  • html登录页面整理

    万次阅读 2018-07-02 16:58:53
    &lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAycAAAJGCAYAAABBdvriAAAgAElEQVR4Aey9W5
  • 登录页面的代码

    万次阅读 2019-06-27 09:34:59
    登录页面的代码 开发工具与关键技术:MVC/JavaScript 作者:邱慧敏 撰写时间:2019/06/25 在把页面和数据库做好之后,我的登录页面只需要 用户名和密码 ,所以代码比较简单。 先找到登录按钮,给一个点击事件,然后...
  • C#登录页面

    千次阅读 2019-05-08 12:02:39
    C#登录页面 开发工具与关键技术:VS MVC、SQL 撰写时间:2019/5/6 验证登录 登录一个系统,必须要有验证登录部分,如果没有验证登录的信息就可以登录一个系统,想必这个系统的意义不大,不然怎么可能什么账号、密码...
  • 登录页面跳转

    千次阅读 2019-05-16 18:08:05
    登录页面跳转 开发工具与关键技术:VS、MVC 作者:黎官凤 撰写时间:2019/05/10 在做项目的时候有很多的项目都是需要实现登录的,在登录页面上填写完整各种登录信息然后点击登录按钮跳转到主页面从而实现到你...
  • 编写3个页面,实现登录页面login.jsp,在其中输入用户名,密码,发送到登录验证页面loginCL.jsp,验证登录成功,在success.jsp页面显示成功提示、打印出相关信息,验证登录失败,返回login.jsp页面,在login.jsp页面...
  • 使用Vue.js和Element-UI做一个简单的登录页面
  • 登录页面增加回车登录功能

    千次阅读 2019-06-06 09:32:00
    当我们在某个网站登录页面填写完用户名和密码做登录的时候,总是会情不自禁的按下回车键,往往有些网站不会给登录页面增加按下回车登录的功能。 下面是一个回车登录的例子: $(function () { //回车登录 $(...
  • 优酷登录页面

    千次阅读 2019-04-08 16:32:56
    优酷登录页面 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190408154747...
  • 登录页面ajax请求

    千次阅读 多人点赞 2017-12-19 14:27:20
    登录页面ajax请求
  • JavaWeb快速入门(二)——实现登录页面

    万次阅读 多人点赞 2018-07-04 21:36:37
    (一)静态登录页面我们在https://blog.csdn.net/qq_35616167/article/details/80917262的基础上,继续对javaweb项目进行操作,以熟悉javaweb。在项目工程下的WebRoot文件夹下,为使得项目清晰,我们可以分别新建...
  • Spring security 自定义登录页面,登录后仍然跳转到登录页面 死循环的问题 搭建个人博客项目时遇到的bug,查阅多方资料无解,在改了四个小时后发现是csrf关闭失败的原因 版本信息 springboot 2.2.6 springsecurity 5...
  • 自己在配置spring security自定义的登录页面时,出现 页面直接返回登录页面,不走验证登录流程的问题 解决办法: 图中1 的位置必须注意,2、3的位置可以自己配置,配置的话在这里不用多说,如果想尽快看到效果,...
  • java登录超时回到登录页面 有没有实现此功能的思想呢? 或者有demo 代码最好了 ,谢谢~
  • 我们在做很多基于frame的页面时,一个frame里面的链接内容在另外一个frame中显示,如果页面超时我们在后台的处理基本上都是重定向到登录页面,那么此时这个登录页面就会显示在一个frame中,但是我们需要的效果是整个...
  • jsp+servlet实现简单登录页面功能Demo

    万次阅读 多人点赞 2018-05-28 17:55:16
    小白新路历程-1 [转载请联系本人]实现功能:模拟简单登录功能,登录成功跳转新页面登录失败在原登录界面提示登录失败信息开发环境:eclipseTomcat-8.0预备知识:HTML标签,Servlet相关知识——请求的转发与重定向...
  • keycloak 自定义登录页面

    千次阅读 2020-05-08 11:33:19
    keycloak 自定义登录页面详细步骤如下: 因为keycloak是jboss开发的,使用FTL后缀开发前端文件,可能根据以下方式实现 keycloak将前端页面分为四类:按类设置主题。 •Account - Account management •Admin - ...
  • 登录页面的逻辑

    千次阅读 2019-04-23 21:48:55
    登录页面的逻辑 开发工具与关键技术:Visual Studio 2015 登录逻辑 作者:李国旭 撰写时间:2019年4月23日 我们平常玩的微信、QQ、微博、游戏等,这些聊天的工具和游戏都会有一个登录的界面,让我们输入用户的信息来...
  • 制作京东登录页面

    千次阅读 2019-05-12 13:21:12
    制作京东登录页面 制作京东登录页面 header {/头部界面/ height: 100px; background-image: url(“img/608ba4ceaa996be86f6f62c0bf3f5cd.png”); background-repeat: no-repeat; background-position: 120px ...
  • 模仿京东登录页面

    万次阅读 多人点赞 2017-01-02 18:52:47
    简单的模仿京东登录页面
  • 前几天做个APP,需要用到登录页面,无奈本人艺术细胞太差,于是去GitHub逛了一圈,没有找到特别满意的,于是只能自己设计了一个,将就着用一下,后续会继续扩充。大家有比较好的设计方案欢迎评论区分享! 废话不多说...
  • 上百套HTML5登录页面模板

    万次阅读 多人点赞 2019-03-01 10:54:57
    html登录页面
  • 登录页面测试用例

    千次阅读 2018-07-16 10:01:30
    登录页面的测试对于软件测试相当于hello world对于程序员的意义,甚至意义更大。有时候最基础的东西,往往最难,也往往被人忽略。已经在软件测试行业摸爬滚打两年了,但是如果面试的时候让我设计登录页面的测试用例...
  • 前端小案例:登录页面

    千次阅读 多人点赞 2020-01-31 21:26:59
    前端入门相对来说不是太难,当然想要学得很精通还是有一定难度的,至少对于刚刚接触这方面知识的我来说,还是比较掉头发的(开个小玩笑啦),下面是我做的一个小案例,比较简单和常见的登录页面,不足之处,希望给为...
  • 例:1) 完成登录页面效果2) 输入用户名(手机号)和密码,并做合法性校验,当手机号格式不正确时,提示“请输入合法的手机号”3) 完成记住密码和自动登录的选中状态切换4) 当选择自动登录时,自动选中记住...
  • 项目存在不同的子系统,需要根据不同的登录路径,登录成功后跳转不同的登录页面。 2.总体思路 将点击的路径记录到session中,登录成功后获取路径进行跳转 3.代码 目的是获得登录时的路径,保存到session中 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 81,631
精华内容 32,652
关键字:

登录页面