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. python 数据分类赋值

    问题描述:在数据预处理时,往往需要对描述性数据进行分类赋值或对数据进行分级赋值. 首先,会想到用for循环,依次判断赋值: for n in range(len(data1)): print(n) i ...

  2. word中一页中添加两种不同的页码

    ,在文档编写的过程中,可能一个页面需要编写两个不同的页码,举个例子,在页脚有一个页码是整个文档的页码,页眉有一个页码,是每个章节的页码: 设置如下: 此处选中这个图标是为了能够看到分节符和其他的符号 ...

  3. python 基础语法练习回顾

    #!/usr/bin/python# -*- coding: UTF-8 -*-import timeimport calendar student = {"age": 7,&qu ...

  4. Hadoop 2.7.4 HDFS+YRAN HA增加datanode和nodemanager

    当前集群 主机名称 IP地址 角色 统一安装目录 统一安装用户 sht-sgmhadoopnn-01 172.16.101.55 namenode,resourcemanager /usr/local ...

  5. 缺少的文件是 ..\packages\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props。

    报错信息: 严重性 代码 说明 项目级别 文件 行 禁止显示状态 工具错误 这台计算机上缺少此项目引用的 NuGet 程序包.使用“NuGet 程序包还原”可下载这些程序包.有关更多信息,请参见 ht ...

  6. Linux Shell基线配置高级操作

    一.输入解析类 1.1 echo解析tab和换行 问题描述:echo默认是原样输出字符串,并不解析\t和\n等反斜杠字符,如下图所示.我们希望echo能解析\t和\n等字符. 处理办法:可以使用-e指 ...

  7. UVa LA 3266 - Tian Ji -- The Horse Racing 贪心，不只处理一端，也处理另一端以理清局面 难度: 2

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  8. 强大的金融类图表库 TradingView 使用分享

    这段时间刚好做币圈交易所,运用到了现在最火的金融类图表库 -- TradingView ,就是强大,基本上现在的火币网(https://www.huobi.com),币安网(https://www.b ...

  9. JS 跳出多重循环

    今天学到了如何跳出多重循环

  10. Factorial(hdu 1124)

    Description The most important part of a GSM network is so called Base Transceiver Station (BTS). Th ...