代码如下

<!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. 解密Prompt系列29. LLM Agent之真实世界海量API解决方案：ToolLLM & AnyTool

    很早之前我们就聊过ToolFormer,Gorilla这类API调用的Agent范式,这一章我们针对真实世界中工具调用的以下几个问题,介绍微调(ToolLLM)和prompt(AnyTool)两种方案 ...

  2. Vue 3指令与事件处理

    title: Vue 3指令与事件处理 date: 2024/5/25 18:53:37 updated: 2024/5/25 18:53:37 categories: 前端开发 tags: Vue3 ...

  3. 『手撕Vue-CLI』拉取模板名称

    前言 好,经过上篇文章的介绍,已经可以有处理不同指令的能力了,接下来我们就来处理 vue create 指令,这个指令的本质就是从网络上下载提前准备好的模板,然后再自动安装模板中相关依赖. 所以实现 ...

  4. Git三大区域

    1.工作区 2.暂存区 3.版本库

  5. Xcode 自动化构建问题梳理

    一.Xcode Xcode是mac OS平台上面开发的官方IDE,可以用来开发iOS应用和mac应用.随着iOS系统的升级,Xcode也会更新,而且是强制更新. Xcode每次版本更新稳定性很差,经常 ...

  6. 「C++」深度分析C++中i++与++i的区别

    大家好,我是Charzie.在C++编程中,i++和++i是两个常见的自增运算符,用于将变量的值增加1(有时与i+=1效果一样).然而,虽然它们的功能看似相似,但在实际使用中却存在显著的区别.本博客将 ...

  7. k8s——statefulset

    statefulset基础模版 [root@master statefulset]# cat web.yaml --- apiVersion: v1 kind: Service metadata: n ...

  8. 操作标签的属性和属性值 table表格

     // 操作标签的属性和属性值         // 特殊的属性           // 可以直接通过 点语法或者[]语法来操作的属性         // id 和 class           ...

  9. LeetCode 449. Serialize and Deserialize BST 序列化和反序列化二叉搜索树 (Java)

    题目: Serialization is the process of converting a data structure or object into a sequence of bits so ...

  10. linux，curl命令发送各类请求详解

    当你经常面对api时,curl将是你重要学习的工具,因为curl可以让你不需要浏览器也能作为Http客户端发送请求.而且它是跨平台的,Linux.Windows.Mac都会执行的很好. 一.curl ...