css-渐变简约的登录设计

代码如下

<!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>

posted @ 2020-06-14 15:00 东血阅读(226) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

东血

THE SKY RIVER IS NOT AS DAZZING AS YOU

css-渐变简约的登录设计

代码如下

公告

最新随笔

积分与排名

随笔分类 (138)

随笔档案 (140)

阅读排行榜