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算圆周率及进度条提示

    (一)圆周率 : (1)圆周率是指平面上圆的周长与直径之比 (ratio of the circumference of a circle to the diameter) .用符号π表示.中国古代有 ...

  2. 倍增法求LCA（最近公共最先）

    对于有根树T的两个结点u.v,最近公共祖先x=LCA(u,v)表示一个结点x,满足x是u.v的祖先且x的深度尽可能大. 如图,根据定义可以看出14和15的最近公共祖先是10,   15和16的最近公共 ...

  3. Genymotion下载及安装

    引用https://blog.csdn.net/yht2004123/article/details/80146989 一.注册\登录 打开Genymotion官网,https://www.genym ...

  4. hbase-0.92.1过滤器学习

    查看当前hbase中支持的过滤器 hbase(main):060:0* show_filters Documentation on filters mentioned below can be fou ...

  5. bom头

    最近做ecshop经常碰到bom头问题,具体表现用chrome开发工具查看会出现小红点, 具体删除办法见网上,我是用老文件copy再替换内容.

  6. Cognos集成至portal平台查看报表报错RSV-BBP-0022

    1. 问题描述 绝对密切性请求“asynchWait_Request”失败,所请求的会话不存在. 2. 问题分析 Session会话传递失败. 3. 解决方案 将cognos所在服务器地址IP添加进I ...

  7. net.js

    var http = require('http'); var https = require('https'); var url=require("url"); var pass ...

  8. 常被问到的十个 Java 面试题

    在这篇文章中,我试图收录最有趣和最常见的问题.此外,我将为您提供正确的答案. 接下来,就让我们来看看这些问题. 1. 以满分十分来评估自己——你有多擅长 Java? 如果你并不完全确信你自己或是你对 ...

  9. bootstrap全局样式二

    加form-grope是为了以后更好的管理,一组form写一个form-grope 显示如下: 并排显示的话,给用户名前面再加一个div,再加horizontal,如下,并且加上control-lab ...

  10. 怎样用div做三角形

    20181204 用盒子模型做三角形的效果: <div></div> width:0px; height:0px; border:10px solid red; border- ...