<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>loginPage</title>

    <style>

        html{

            height: 100%;

        }

        body{

            background-image: linear-gradient(to top, #330867 0%, #30cfd0 100%);

            margin: 0;

            }

        h2{

            text-align: center;

            color: white;

        }

        .box{

            width: 400px;

            height: 320px;

            background-color: black;

            border-radius: 10px;

            margin: 0 auto;

            margin-top: 10%;

            padding: 30px;

            opacity: 0.7;

        }

        .item{

            height: 45px;

            width: 100%;

            color: #03e9f4;

            border-bottom: 1px solid #fff;

            margin-bottom: 40px;

            position: relative;

        }

        .item input{

            width: 100%;

            height: 100%;

            color: white;

        }

        .item input:focus+label,.item input:valid+label{

            top: 0;

            font-size: 12px;

            color: white;

        }

        .item label{

            position: absolute;

            left: 0;

            top: 12px;

            transition: all 0.3s linear;

        }

        .btn{

            width: 100px;

            height: 40px;

            border: 1px solid white;

            border-radius: 10px;

            color: #03e9f4;

            padding: 10px 20px;

            margin-left: 150px;

            margin-top: 15px;

        }

        .btn:hover{

            background-color: #03e9f4;

            color: white;

            box-shadow: 0 0 5px 0 #03e9f4,

                        0 0 25px 0 #03e9f4,

                        0 0 50px 0 #03e9f4,

                        0 0 100px 0 #03e9f4;

            text-transform: uppercase;

        }

        input,button{

            width: 100%;

            height: 100%;

            background-color: transparent;

            outline: none;

            border: none;

            padding-top: 20px;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

    <div class="box">

        <h2>Login</h2>

        <form action="">

            <div class="item">

                <input type="text" required>

                <label>Username</label>

            </div>

            <div class="item">

                <input type="password" required>

                <label>Password</label>

            </div>

            <button class="btn">submit</button>

        </form>

    </div>

</body>

</html>

一个简单的CSS登录页的更多相关文章

  1. Node.js基于Express框架搭建一个简单的注册登录Web功能

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  2. 程序猿修仙之路--数据结构之你是否真的懂数组？ c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截

    程序猿修仙之路--数据结构之你是否真的懂数组?   数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构  .要想在之后的江湖历练中通关,数据结构必不可少. ...

  3. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...

  4. 一个简单的CSS示例

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 & ...

  5. HTML5实战教程———开发一个简单漂亮的登录页面

    最近看过几个基于HTML5开发的移动应用,比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的,虽然还是有点反应迟钝,但已经比较流畅了,相信随着智能手机的配置越来越高性能越来越好,会越来越 ...

  6. 搭建CAS服务器，并实现一个简单的单点登录的demo

    官网:http://jasig.github.io/cas/Cas Server下载:http://developer.jasig.org/cas/Cas Client下载:http://develo ...

  7. 【SSO】一个简单的单点登录演示实现

    业务系统的管理后台往往数量众多,且各自需要一套用户名密码来进行登录,不方便使用.因此花了点时间研究如何实现一套单点登录系统. 众所周知,SSO系统设计中,往往需要想办法解决cookie不能跨域的问题, ...

  8. 一个简单的PHP登录演示(SESSION版 与 COOKIE版)

    //==============COOKIE版本的简单登录================ if ($_GET[out]){ setcookie('id',''); setcookie('pw','' ...

  9. ASP.NET MVC如何做一个简单的非法登录拦截

    摘要:做网站的时候,经常碰到这种问题,一个没登录的用户,却可以通过localhost:23244/Main/Index的方式进入到网站的内部,查看网站的信息.我们知道,这是极不安全的,那么如何对这样的 ...

随机推荐

  1. ExtJS动态隐藏Panel中按钮

    1.直接隐藏 在bbar的按钮中直接加属性:hidden : true 属性,可隐藏:disabled : true 属性,可禁用 在columns列中直接加属性:hidden : true 属性,可 ...

  2. Java-LinkedList围圈的人名

    import java.util.*; public class Example12_7 { public static void main(String[] args) { int m=5; Lin ...

  3. 关于Java Web结构和SSM框架的理解

    Java Web常见的三层结构 表现层:也就是Web层,常见的框架有Spring MVC.Struts2 ,并包括用于展示的界面,如JSP界面:业务层:Service层,专注于业务逻辑的实现:持久层: ...

  4. [译]Tus 协议

    原文地址:https://tus.io/protocols/resumable-upload.html 摘要 该协议提供一种基于 HTTP/1.1 和 HTTP/2 机制用于文件断点续传. 核心协议 ...

  5. 全网首发，腾讯T3-3整理Netty学习方案（体系图+项目+学习文档）

    前言: 想要学好一门技术,最起码要对他有一定的了解,起码听说过相应的底层原理的东西吧,最起码你要有一点能和别人交流的内容吧,下面是我精简的一点内容,希望对于大家了解netty能有一点帮助 Netty是 ...

  6. [256个管理学理论]006.刺猬效应（Hedgehog Effect）

    刺猬效应(Hedgehog Effect) 来自于大洋彼岸的让你看不懂的解释: 刺猬效应(刺猬法则)就是人际交往中的“心理距离效应”.人与人之间都应该保持这条底线,过犹不及. 刺猬效应强调的就是人际交 ...

  7. 解决google play上架App设置隐私政策声明问题

    在我们的app上架到google play后,为了赚点小钱,就集成google ads,然而这会引发一个新的问题,那就是设置隐私政策声明的问题,通常我们会收到一封来自google play的邮件,提示 ...

  8. 【MOOC操作系统】测试题大题-进程调度 先入先服务算法例题 【某多道程序系统供用户使用的主存为100K，磁带机2台，打印机1台，采用可变分区存储管理，静态方式分配外围设备（进程获得所需全部设备才能进入内容），忽略用户作业的I/O时间。采用动态分区、首次匹配法（从低地址区开始）分配主存，一个作业创建一个进程，且运行中不紧缩内存。作业调度采用FCFS算法，在主存中的进程采用剩余时间最短调度算法。】

    分析图: 答案: (1) 8 : 00作业1到达,占有资源并调入主存运行. 8: 20作业2和3同时到达,但作业2因分不到打印机,只能在后备队列等待.作业3资源满足,可进主存运行,并与作业1平分CPU ...

  9. 实验三 UML 建模工具的安装与使用

    UML 建模工具的安装与使用一. 实验目的1) 学习使用 EA(Enterprise Architect) 开发环境创建模型的一般方法: 2) 理解 EA 界面布局和元素操作的一般技巧: 3) 熟悉 ...

  10. Rocket - debug - Example: Write Memory

    https://mp.weixin.qq.com/s/on1LugO9fTFJstMes3T2Xg 介绍riscv-debug的使用实例:使用三种方法写内存. 1. Using System Bus ...