实现一个漂亮简单的登录界面

程序员文章站 2022-04-11 13:46:45

...

方法一：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
            font-family: JetBrains Mono Medium;
            display: flex;
            align-items: center;
            justify-content: center;
            /* background-color: #0e92b3; */
            background: url('img/city.png') no-repeat;
            background-size: 100% 100%;
        }
        
        .form-wrapper {
            width: 300px;
            background-color: rgba(41, 45, 62, .8);
            color: #fff;
            border-radius: 2px;
            padding: 50px;
        }
        
        .form-wrapper .header {
            text-align: center;
            font-size: 35px;
            text-transform: uppercase;
            line-height: 100px;
        }
        
        .form-wrapper .input-wrapper input {
            background-color: rgb(41, 45, 62);
            border: 0;
            width: 100%;
            text-align: center;
            font-size: 15px;
            color: #fff;
            outline: none;
        }
        
        .form-wrapper .input-wrapper input::placeholder {
            text-transform: uppercase;
        }
        
        .form-wrapper .input-wrapper .border-wrapper {
            background-image: linear-gradient(to right, #e8198b, #0eb4dd);
            width: 100%;
            height: 50px;
            margin-bottom: 20px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .form-wrapper .input-wrapper .border-wrapper .border-item {
            height: calc(100% - 4px);
            width: calc(100% - 4px);
            border-radius: 30px;
        }
        
        .form-wrapper .action {
            display: flex;
            justify-content: center;
        }
        
        .form-wrapper .action .btn {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
        }
        
        .form-wrapper .action .btn:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        
        .form-wrapper .icon-wrapper {
            text-align: center;
            width: 60%;
            margin: 0 auto;
            margin-top: 20px;
            border-top: 1px dashed rgb(146, 146, 146);
            padding: 20px;
        }
        
        .form-wrapper .icon-wrapper i {
            font-size: 20px;
            color: rgb(187, 187, 187);
            cursor: pointer;
            border: 1px solid #fff;
            padding: 5px;
            border-radius: 20px;
        }
        
        .form-wrapper .icon-wrapper i:hover {
            background-color: #0e92b3;
        }
    </style>
</head>

<body>
    <div class="form-wrapper">
        <div class="header">
            login
        </div>
        <div class="input-wrapper">
            <div class="border-wrapper">
                <input type="text" name="username" placeholder="username" class="border-item" autocomplete="off">
            </div>
            <div class="border-wrapper">
                <input type="password" name="password" placeholder="password" class="border-item" autocomplete="off">
            </div>
        </div>
        <div class="action">
            <div class="btn">login</div>
        </div>
        <div class="icon-wrapper">
            <i class="iconfont icon-weixin"></i>
            <i class="iconfont icon-qq"></i>
            <i class="iconfont icon-git"></i>
        </div>
    </div>
</body>

</html>

效果图：实现一个漂亮简单的登录界面

方法二：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url('img/city.png') no-repeat;
            background-size: 100% auto;
        }
        
        #login_box {
            width: 20%;
            height: 400px;
            background-color: #00000060;
            margin: auto;
            margin-top: 10%;
            text-align: center;
            border-radius: 10px;
            padding: 50px 50px;
        }
        
        #login_box input,
        #login_box button {
            outline: none;
        }
        
        #login_box h2 {
            color: #ffffff90;
            margin-top: 5%;
        }
        
        #login_box #form #input_box {
            margin-top: 5%;
        }
        
        #login_box #form #input_box input {
            border: 0;
            width: 60%;
            font-size: 15px;
            color: #ffffff;
            background: #ffffff00;
            border-bottom: 2px solid #ffffff;
            padding: 5px 10px;
            margin-top: 10px;
        }
        
        #login_box button {
            margin-top: 50px;
            width: 40%;
            height: 20px;
            border-radius: 10px;
            border: 0;
            color: #fff;
            font-size: 15px;
            background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
            cursor: pointer;
        }
        
        #login_box #sign_up {
            margin-top: 45%;
        }
        
        #login_box #sign_up a {
            color: #b94648;
        }
    </style>
</head>

<body>
    <div id="login_box">
        <h2>LOGIN</h2>
        <div id="form">
            <div id="input_box">
                <input type="text" placeholder="Username">
            </div>
            <div id="input_box">
                <input type="password" placeholder="Password">
            </div>
        </div>
        <button id="sign_in">Sign in</button>
        <br>
        <div id="sign_up">
            <a href="javascript:;">忘记密码?</a>
        </div>
    </div>
</body>

</html>

效果图实现一个漂亮简单的登录界面

背景图片资源为：实现一个漂亮简单的登录界面

上面两个代码皆可实现一个简洁的登录页面，代码可直接使用（主要是背景图好看。。。）

上一篇：网上商城不同类别产品数据库的设计思路

下一篇：无刷新登陆_PHP教程

实现一个漂亮简单的登录界面

Python Tkinter 简单登录界面的实现

使用jQuery如何写一个含验证码的登录界面

jsp连接sql数据库的步骤（用jsp连接sql做一个登录界面）

Javascript实现一个简单的输入关键字添加标签效果实例

PHP 实现超简单的SESSION与COOKIE登录验证功能示例

一个简单的php实现的MySQL数据浏览器

使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)

php 实现简单的登录功能示例【基于thinkPHP框架】

不到40行代码用Python实现一个简单的推荐系统

Android用MVP实现一个简单的类淘宝订单页面的示例