HTML：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title></title>
</head>
<body>
    <form class="box" action="index.html">
        <h1>LOGIN</h1>
        <input class="username" type="text" placeholder="username">
        <input class="userpassword" type="text" placeholder="password">
        <button class="submit" type="submit">login</button>
    </form>
</body>
</html>

　　CSS：

body{
    margin:;
    padding:;
    background:#576574;
}
.box{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:250px;
    height:300px;
    background:#222f3e;
    text-align: center;
}
.box h1{
    color:whitesmoke;
    font-size:30px;
    margin-bottom:36px;
}
.box input{
    margin:25px auto;
    display: block;
    width:160px;
    height:35px;
    border:2px solid #54a0ff;
    border-radius: 30px;
    outline: none;
    background:#222f3e;
    text-align: center;
    color:whitesmoke;
    transition: 0.3s;
}
.submit{
    width:100px;
    height:35px;
    color:white;
    background:#222f3e;
    border:2px solid #54a0ff;
    border-radius: 25px;
    outline: none;
    transition: 0.4s;
    cursor: pointer;
}
.box input:focus{
    width:200px;
    border:2px solid #10ac84;
    transition: 0.3s;
}
.submit:hover{
    border:2px solid #10ac84;
    width:200px;
    transition: 0.4s;
}

CSS效果：简单的登录框的更多相关文章

  1. 【python笔记】Qt+云函数 实现简单的登录框制作

    [python笔记]Qt+云函数 实现简单的登录框制作 备注:前置条件:QtDesigner.pycharm.PyQt5.配置好的云函数(百度的叫函数计算CFC,用来充当一个简陋的服务器,主要是免费) ...

  2. HTML和CSS实现的透明登录框效果

    实现代码 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  4. 第十五篇-EditText做简单的登录框

    TextView和EditText的简单应用. MainActivity.java package com.example.aimee.edittexttest; import android.sup ...

  5. JQuery+CSS3实现封装弹出登录框效果

    原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...

  6. Java结合SpringBoot拦截器实现简单的登录认证模块

    Java结合SpringBoot拦截器实现简单的登录认证模块 之前在做项目时需要实现一个简单的登录认证的功能,就寻思着使用Spring Boot的拦截器来实现,在此记录一下我的整个实现过程,源码见文章 ...

  7. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  8. CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  9. 第107天：Ajax 实现简单的登录效果

    使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...

随机推荐

  1. Android系统下app测试功能点

    一.安装卸载 1.验证app能否正常的安装启动运行,安装后的文件夹及文件是否写到了指定的目录里,卸载后相关文件是否清除 2.软件安装/卸载过程中意外情况的处理是否符合需求(如死机,重启,断电) 3.安 ...

  2. hdoj4859海岸线

    1.地图周围再加一圈海 2.周长最多为sum=n*(m+1)+m*(n+1).如果有邻接相同,要减1.最小割使相同最少.结果为sum-最小割 3.但是有E海滩,两边都能选.让E到S,T都连一个很大的数 ...

  3. Mtlab:抛物型方程的交替方向隐格式(ADI)

    tic; clear clc M=[,,,,]; N=M; :length(M) h=/M(p);% 这里定义空间步长等距 tau=/N(p); % 时间步长 x=:h:; y=:h:; t=:tau ...

  4. MySQL Packets larger than max_allowed_packet are not allowed

    MySQL的一个系统参数:max_allowed_packet,其默认值为1048576(1M), 查询:show VARIABLES like '%max_allowed_packet%'; 修改此 ...

  5. sql 2012 用户sa登陆不上

    1.通过Windows身份验证进入服务器 2.点击“安全性”--“登录名”--“sa” 3.右击sa,点击“属性” 4.取消“强制实施密码策略(F)”勾选 5.对密码重新输入 6.点击确定,重新用SQ ...

  6. Asp.Net MVC+EF+三层架构

    架构图: 使用的数据库: 一张公司的员工信息表,测试数据 解决方案项目设计: 1.新建一个空白解决方案名称为Company 2.在该解决方案下,新建解决方案文件夹(UI,BLL,DAL,Model) ...

  7. MySQL数据库再回首

    前言: 数据库是程序员的数据源泉,加上近期 要开发DB可视化.性能分析的功能 重新回顾一下MySQL知识,以下是笔记: MySQL架构 MySQL基础理论 1.什么是关系型数据库? 关系型数据库,这个 ...

  8. React-Error

    1. react创建一个单页应用,官网给的命令是ngx create-react-app my-project 2. window上表示,安装失败 3.解放办法:npm install -g crea ...

  9. bzoj4700

    题解: cdq分治 先考虑没有人被秒掉的情况 代码: #include<bits/stdc++.h> #define y1 ____y1 ; using namespace std; ty ...

  10. VMware虚拟机开机自启动

    VMware虚拟机开机自启动 linux 2018年05月09日 08时30分18秒 VMware的命令行语句可以切换到VMware安装目录,使用vmrun.exe --help(windows下)查 ...