css登录界面

最新推荐文章于 2024-09-03 14:47:13 发布

一夕ξ

最新推荐文章于 2024-09-03 14:47:13 发布

阅读量3.2k

点赞数 2

分类专栏：前端学习文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_45387575/article/details/126975968

版权

前端学习专栏收录该内容

77 篇文章 7 订阅

订阅专栏

1、 width：

如果想让div元素的大小是整个界面

使用vw/vh单位设置网页元素的尺寸，其也是相对单位

vw是viewport width，1vw = 1/100视口宽度
vh是viewport height，1vh = 1/100视口高度

2、巧用flex布局，不要总是想着子绝父相加浮动

3、background

background ：bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip

background: inherit

表示继承父级元素的属性

4、calc

calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算

注意：加法和减法的运算符号两边必须有空格；乘法：两个值之间必须有一个数字；除法：左边必须为数字

5、伪类和伪元素

伪类是一种状态，可以视作选择器，比如说鼠标经过 伪类:hover，（博班如果是鼠标经过盒子，盒子里面的样式会有变化，则使用伪类）

伪元素是元素，就是css模拟出来的一个盒子（如果想在盒子内部插入一个小盒子，就使用伪元素（主要用来做装饰作用））

6、 filter

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url('https://ts1.cn.mm.bing.net/th/id/R-C.9d7eb08a93452ee7c776d2581e11f973?rik=xpJgAnnl0iOb0Q&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f18871739%2f10.jpg&ehk=khUh9RhrTf98oOjkftcIwrpaG8Z1KkytBjl0gog%2b0Bw%3d&risl=&pid=ImgRaw&r=0') fixed no-repeat;
            background-size: cover;
        }
        
        .formput {
            width: 440px;
            height: 320px;
            display: flex;
            flex-direction: column;
            text-align: center;
            padding: 40px;
            position: relative;
            z-index: 0;
            background: inherit;
            border-radius: 18px;
            overflow: hidden;
        }
        
        .formput::before {
            content: " ";
            width: calc(100% + 50px);
            height: calc(100% + 50px);
            position: absolute;
            top: -10px;
            left: -10px;
            background: inherit;
            filter: blur(16px);
            z-index: -1;
            overflow: hidden;
        }
        
        .formput h2 {
            font-size: 18px;
            font-weight: 36px;
            color: #3d5245
        }
        
        .formput input,
        .formput button {
            margin: 6px 0;
            height: 36px;
            border: none;
            background-color: #fff;
            border-radius: 5px;
            padding: 0 14px;
            color: black
        }
        
        button:hover {
            background-color: grey;
        }
    </style>
</head>

<body>
    <div class="container">
        <form action="" class="formput">
            <h2>登录</h2>
            <input type="text" placeholder="用户名">
            <input type="password" placeholder="密码框">
            <button>提交</button>
        </form>
    </div>
    <script>
    </script>
</body>

</html>