代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Loginone</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            letter-spacing: .05em;

        }

        html {

            height: 100%;

        }

        body {

            height: 100%;

        }

        .container {

            height: 100%;

            /* 设置渐变色 */

            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);

        }

        .login-wrapper {

            background-color: #fff;

            width: 250px;

            height: 500px;

            position: relative;

            padding: 0 50px;

            border-radius: 15px;

            /* 设置框的居中位置也可以采用flex布局方式 */

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

        }

        .login-wrapper .header {

            font-size: 30px;

            font-weight: bold;

            text-align: center;

            line-height: 200px;

        }

        .login-wrapper .form-wrapper .input-item {

            display: block;

            width: 100%;

            margin-bottom: 20px;

            border: 0;

            padding: 10px;

            border-bottom: 1px solid rgb(128, 125, 125);

            font-size: 15px;

            outline: none;

        }

        .login-wrapper .form-wrapper .input-item ::placeholder {

            text-transform: uppercase;

        }

        .login-wrapper .form-wrapper .btn {

            text-align: center;

            padding: 10px;

            margin-top: 40px;

            width: 100%;

            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);

            color: #fff;

        }

        .login-wrapper .msg {

            text-align: center;

            line-height: 80px;

        }

        .login-wrapper .msg a {

            /* 消除下划线 */

            text-decoration: none;

            text-decoration-color: none;

            color: #a6c1ee;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="login-wrapper">

            <div class="header">Login</div>

            <div class="form-wrapper">

                <input type="text" name="username" placeholder="username" class="input-item">

                <input type="password" name="password" placeholder="password" class="input-item">

                <div class="btn">Login</div>

            </div>

            <div class="msg">

                Don't have account?<a href='#'>Sign up</a>

            </div>

        </div>

    </div>

</body>

</html>

css-渐变简约的登录设计的更多相关文章

  1. Gradify - 提取图片颜色，创建响应式的 CSS渐变

    被请求的HTTP对象之间的延迟会有一个时间段,这个期间网页看起来不完整.Gradify 可以分析出图像中4个最常见的颜色,创建一个梯度(或纯色)作为图片占位符.Gradify 可以在在任何图像发现最突 ...

  2. CSS技巧（1）· CSS渐变 linear-gradient

    前言: 不论在网页设计中,还是传统的媒介中,各种尺寸,颜色,角度的图案在视觉中无处不在,要想在网页中实现复杂的图案,其过程往往不够理想,过去,我们可以创建一个单独的位图文件,然后每次需要做调整的时候, ...

  3. 背景新增属性和css渐变及倒影

    背景新增属性和css渐变及倒影 一.background新增属性 background-size:指定对象的背景图像的尺寸大小. background:url() 0 0,url() 0 100%;多 ...

  4. CSS 图像高级 CSS 渐变

    CSS 渐变 CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果.用渐变代替图片,可以加快页面 ...

  5. 使用CSS渐变

    转载自:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients CSS 渐变 是在 CSS3 Image ...

  6. CSS渐变之CSS3 gradient在Firefox3.6下的使用

    一.引子 Firefox3.6包含了许多CSS的改进,本文将向您展示如果使用CSS渐变. 如果你正在运行的Firefox 3.6的最新测试版,你应该看看我们的互动演示,并查看相应的代码.使用单选按钮来 ...

  7. CSS渐变的两种基本用法

    1.线性渐变(linear-gradient) 基础用法:background:linear-gradient(angle,start-color,soft-line,end-color); 依次解释 ...

  8. HTMl+CSS 模仿京东网登录页面

    课后实践项目,仅页面效果,写博客纯属记录! 码云开源仓库地址:https://gitee.com/ynavc/jd 演示地址:https://ynavc.gitee.io/jd 效果图: 实现代码: ...

  9. CSS浮动布局与菜单栏设计

    公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...

  10. RESTful登录设计（基于Spring及Redis的Token鉴权）

    转载自:http://www.scienjus.com/restful-token-authorization/ http://m.blog.csdn.net/article/details?id=4 ...

随机推荐

  1. FE知识点(硕哥)

    目录 前传: 1.typeof和类型转换 正文: 1.作用域.作用域链([[scope]]) 2.立即执行函数 3.闭包 4.对象.包装类 5.原型原型链 6.call.apply 7.继承模式.命名 ...

  2. MySQL优化方向

    MySQL优化手段 数据库设计层面 范式设计 减少数据冗余 提高数据一致性 索引策略 选择合适的索引类型 (BTREE, HASH) 覆盖索引 索引选择性 表结构优化 使用合适的数据类型 避免使用NU ...

  3. 搭建一套完整的ELK系统

    ELK日志收集系统介绍   一  简单介绍 ELK部署搭建有很多成型的方案,这里推荐一种比较中规中矩的方案,它整合了logstash比较消耗资源以及当服务端临时宕机的时候出现数据丢失的问题,主要由fi ...

  4. 一文搞懂 Spring Bean 的生命周期

    一. 前言 在学习Spring框架的IOC.AOP两大功能之前,首先需要了解这两个技术的基础--Bean.在Spring框架中,Bean无处不在,IOC容器管理的对象就是各种各样的Bean.理解Bea ...

  5. PHP-FPM 运行原理分析

    概述 PHP-FPM 是一种 Master / Worker 多进程运行模式,进程的数量可以通过 php-fpm.conf 进行具体的配置. Master 进程主要负责 CGI.PHP 环境的初始化. ...

  6. 性能优化陷阱之hash真的比strcmp快吗

    最近网上冲浪的时候看到有人分享了自己最近一次性能优化的经验.我向来对性能是比较敏感的,所以就点进去看了. 然而我越看越觉得蹊跷,但本着"性能问题和性能优化要靠性能测试做依据",我不 ...

  7. nginx学习记录【二】nginx跟.net core结合，实现一个域名访问多个.net core应用

    1.实现转发 打开conf下的nginx.conf文件,如下图: 2.添加.net core网站的转发 按下面的进行修改,修改完后,就把localhost的80转发到了https://localhos ...

  8. .net Core中实现SHA加密

    #region 用SHA1加密字符串 /// <summary> /// 用SHA1加密字符串 /// </summary> /// <param name=" ...

  9. 面试官：说说Netty的核心组件？

    Netty 核心组件是指 Netty 在执行过程中所涉及到的重要概念,这些核心组件共同组成了 Netty 框架,使 Netty 框架能够正常的运行. Netty 核心组件包含以下内容: 启动器 Boo ...

  10. kubernetes命令补全k8s命令补全

    echo "source <(kubectl completion bash)" >> ~/.bashrc source <(kubectl complet ...