html+css 简洁登陆界面

最新推荐文章于 2024-03-25 08:19:22 发布

FF_Chen

最新推荐文章于 2024-03-25 08:19:22 发布

阅读量890

点赞数 1

分类专栏： CSS 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/ff_chen/article/details/106519782

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果如图
在这里插入图片描述
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>
</head>
<style>
    *{
        padding:0;
        margin:0;
        font-family: 'Open Sans Light';
        letter-spacing: .05em;
    }
    html {
        height: 100%;
    }
    body {
        height: 100%;
    }
    .container {
        height: 100%;
        background-image: linear-gradient(to right, #d9afd9,#97d9e1);
    }
    .login-wrapper {
        background-color: #fff;
        width: 300px;
        height: 500px;
        border-radius: 15px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        padding: 30px;
    }
    .login-wrapper .header {
        font-size: 30px;
        font-size: bold;
        text-align: center;
        line-height: 200px;
    }
    .login-wrapper .form-wrapper .input-item {
        display: block;
        box-sizing: border-box;
        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;
        box-sizing: border-box;
        padding: 10px;
        width: 100%;
        margin-top: 40px;
        background-image: linear-gradient(to right,#97d9e1,#feada6);
        color: #fff;
    }
    .login-wrapper .msg{
        text-align: center;
        line-height: 80px;
    }
    .login-wrapper .msg a{
        text-decoration: none;
        color: #fbc2eb;
    }

</style>

<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 acount?<a href="#">Sign up</a></div>
        </div>
    </div>
</body>

<script>
    
</script>

</html>

FF_Chen

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
html+css 简洁登陆界面

效果如图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></head><style>
复制链接

扫一扫

专栏目录