代码如下

<!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. Must use PackageReference 解决办法

    Must use PackageReference 这是因为 .net framework的项目 在nuget时,引用到了 .net core 下的包. 解决办法,把之前引用的相关包全部在nuget上 ...

  2. 一文看懂Spring事务的七种传播行为

    什么叫事务传播行为?听起来挺高端的,其实很简单. 即然是传播,那么至少有两个东西,才可以发生传播.单体不存在传播这个行为. 事务传播行为(propagation behavior)指的就是当一个事务方 ...

  3. HTML——input之密码框

    在 HTML 中,把 <input> 标签的 type 属性设置为 password 可以表示密码框.具体语法格式如下: <input type="password&quo ...

  4. Android 13 - Media框架（21）- ACodec（三）

    关注公众号免费阅读全文,进入音视频开发技术分享群! 这一节我们一起来了解 ACodec 是如何通过 configureCodec 方法配置 OMX 组件的,因为 configureCodec 代码比较 ...

  5. WPF开发快速入门【5】DataGrid的使用

    概述 DataGrid是最常用的一种列表数据展现控件,本文介绍DataGrid的一些常用操作,包括:展示.新增.删除.修改等.以下代码基于Stylet框架实现. 数据展示 DataGrid用于对象列表 ...

  6. scala怎么退出

    scala怎么退出 scala> :help //查看帮助 All commands can be abbreviated, e.g., :he instead of :help. :edit ...

  7. 常见的Linux命令

     在 cmd 命令行 或者终端中             可以运行 node.js 命令 也可以 运行 SQL语句 还可以运行 Linux 命令                          Li ...

  8. ETL工具-nifi干货系列 第十八讲 nifi Funnel实战教程

    1.Funnel (漏斗),Funnel是 NiFi 组件,用于将多个连接中的数据合并到一个连接中. 使用场景:nifi中的Funnel组件用于合并多个数据流并将它们传递到下游处理器.它可以将来自不同 ...

  9. ETL工具-nifi干货系列 第七讲 处理器JoltTransformJSON（续）

    第六讲教程只简单介绍了Jolt的chain转换模式,本节课介绍下Jolt的各种转换模式. 点击的处理器JoltTransformJSON高级配置选项,进行测试Jolt的转换模式. 1.Cardinal ...

  10. kettle从入门到精通 第三十四课 kettle 错误处理

    1.我们在平常写应用程序的时候,需要主动捕获异常或者错误,不然程序有可能异常退出.同样kettle 也支持异常或者错误处理,下图展示的是在批量插入数据的时候捕获异常,如唯一健冲突,死锁等,并将错误信息 ...