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. .NetCore WebApi 添加 Log4Net

    一 .配置 1.vs2019 创建一个.net core web程序,选择webapi 2.项目中添加一个配置文件:添加--新建项--XML文件,命名为log4net.config 我使用的是log4 ...

  2. 蓝桥杯第六届省赛 手链样式 STL

    小明有3颗红珊瑚,4颗白珊瑚,5颗黄玛瑙.他想用它们串成一圈作为手链,送给女朋友.现在小明想知道:如果考虑手链可以随意转动或翻转,一共可以有多少不同的组合样式呢? 分析:这个题首先一定要理解题意,转动 ...

  3. 纯手工编写的PE可执行程序

    [文章标题]: 纯手工编写的PE可执行程序[文章作者]: Kinney[下载地址]: 自己搜索下载[使用工具]: C32[操作平台]: win 7[作者声明]: 只是感兴趣,没有其他目的.失误之处敬请 ...

  4. .NET 控件的认识。

    四单元的题目里面,涉及了很多之前没有用过的控件的使用,前12道题都不是很难,所以很快做完了 ,但是后面的因为timer控件找不到,有些操作无法实现,所以就没做,但是也是认真的看了的. 等什么时候把ti ...

  5. 【转】链接伪类（:hover）CSS背景图片有闪动BUG

    来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...

  6. swig模板引擎汇总

    1. Express中使用swig模板引擎 2.Swig 使用指南 3.jade to html online

  7. Form表单发送到服务器时的编码方式

    ---恢复内容开始--- 表单中的表单中enctype是设置表单的MIME编码. 所谓MIME编码,是指当服务器传送数据给客户端时,必须指定这个文件是什么类型,才能方便客户端调用相应的应用软件来打开该 ...

  8. unity中EventTrigger组件的应用

    using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using D ...

  9. Centos7 Firewall

    1.1 firewall启停设置 [root@tomcat ~]# systemctl stop firewalld.service #关闭firewall [root@tomcat ~]# syst ...

  10. centos源码安装mysql5.7.25-boost

    首先在CentOS6.5的版本安装mysql 创建安装目录,并解压 安装mysql的依赖包.这里需要用到阿里源,去吧阿里源宕到本机 安装依赖包,gcc.gcc-c++.cmake.ncurses-de ...