代码如下

<!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. OpenTelemetry agent 对 Spring Boot 应用的影响：一次 SPI 失效的

    背景 前段时间公司领导让我排查一个关于在 JDK21 环境中使用 Spring Boot 配合一个 JDK18 新增的一个 SPI(java.net.spi.InetAddressResolverPr ...

  2. Vue cli之在组件中使用axios

    默认情况下,我们的项目中并没有对axios包的支持,所以我们需要下载安装. 在项目根目录中使用 npm安装包: npm install axios 接着在main.js文件中,导入axios并把axi ...

  3. nginx四层负载nginx七层负载,nginx基于nginx-sticky会话保持.

    1. nginx负载均衡实战 nginx提供了 4 7层负载均衡. 可根据业务需求选择不同负载均衡策略. 1.1.1 nginx四层负载均衡[网络层TCP负载] 不支持动静分离,但支持 http my ...

  4. java中实现创建目录、创建文件的操作

    一.创建目录 mkdir()--仅创建一层目录,返回true或false. mkdirs()--创建一层或多层目录,返回true或false.   也就是,在通常情况下,使用mkdirs()即可满足创 ...

  5. 解决 Https 站点请求 Http 接口服务后报 the content must be served over HTTPS 错误的问题

    问题分析 之前将自己所有的 Http 站点全部更新为 Https 站点,但是在请求后台接口服务的时候还是 Http 请求,导致部署之后,直接在控制台报 This request has been bl ...

  6. CSP-S2019 江西 题解

    为什么有 \(5\) 道题? [CSP-S2019 江西] 和积和 简单化一下式子: \[(n + 1) \times \sum A_i \times B_i - (\sum A_i) \times ...

  7. 命运2 Cross Save

    epic 上免费领的命运2,进不去,界面提示要扫码. 解决方法: 1.手机或电脑浏览器进入:https://www.bungie.net/. 2.使用epic 账号登录 ,然后设置一个邮箱,邮箱收到验 ...

  8. reids分片技术cluster篇

    为什么学redis-cluster 前面两篇文章,主从复制和哨兵机制保障了高可用 就读写分离,而言虽然slave节点扩展了主从的读并发能力 但是写能力和存储能力是无法进行扩展,就只能是master节点 ...

  9. node.js常用命令总结

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境,用于构建快速.可扩展的网络应用程序.它使用事件驱动.非阻塞 I/O 模型,使其非常适合构建数据密集型的实时应用 ...

  10. golang + postgresql + Kubernetes 后端学习

    记录 链接 dbdiagram 基于 Golang + PostgreSQL + Kubernetes 后端开发大师班[中英字幕]