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

    首先做成HTML的页面,页面内容格式如下: <a href="[scheme]://[host]/[path]?[query]">启动应用程序</a> 这一 ...

  2. HTL里面使用sling model的时候传参问题

    Question: Can we pass in parameters? <div data-sly-use.myClass=”${ ‘mysite.myproject.HeaderCompon ...

  3. Django web框架-----Django templates模板

    说明:mytestsite是django框架下的项目,quicktool是mytestsite项目中的应用 一般的变量之类的用 {{ }}(变量),功能类的比如循环.条件判断是用 {% %}(标签) ...

  4. java中，字符串和集合判断是否为空

    字符串: 集合: 不为空

  5. DS博客作业03——栈和队列

    1.本周学习总结 谈谈你对栈和队列结构的认识及学习体会. 栈和队列的本质就是线性表.所以,相应的栈跟队列都有两种存储结构:顺序存储结构.链式存储结构. 栈的特点是后进先出,根据栈时进时出的规则,出栈的 ...

  6. 搭建SDN网络——mininet

    好久没来写不博客,感觉自己不写写博客,就完全想不起当天干了什么.前几天参加了小米的面试,整个人被打击的不行,还是要好好学习,不然工作都找不到. 这学期选了SDN的课,只有六周,学完有点懵,这这这等于什 ...

  7. uva 10288 gailv

    Problem F Coupons Input: standard input Output: standard output Time Limit: seconds Memory Limit: MB ...

  8. windows—IOCP

    一.重叠I/O回声服务器端 服务端: #include <stdio.h> #include <stdlib.h> #include <WinSock2.h> #d ...

  9. java通过HttpClient方式和HttpURLConnection方式调用WebService接口

    1.引入maven依赖: <dependency> <groupId>org.apache.httpcomponents</groupId> <artifac ...

  10. javaScript简单的留言板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...