表单浮动（input+label）效果

kvyzar

已于 2022-08-28 19:01:11 修改

阅读量782

点赞数

分类专栏： HTML+CSS 文章标签： html css 前端开发语言 pycharm

于 2022-08-28 18:58:14 首次发布

本文链接：https://blog.csdn.net/kvyzar/article/details/126572627

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

系列文章目录

第一章利用HTML+CSS选择器实现定位及浮动

前言

随着Web开发技术和美化的不断发展，这门技术也越来越重要，很多人都开启了学习，本文就介绍了一个完整的网站所需要的登录功能表单浮动的实现。本页面主要利用定位（position）来实现。

一、浮动（float）是什么？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

但是，我们在这里不用float，而且使用CSS定位来实现。

二、CSS Position(定位)

position 属性指定了元素的定位类型。

position 的四个值：static、relative、absolute、fixed。

绝对定位：absolute 和 fixed 统称为绝对定位

相对定位：relative

默认值：static

三、页面实现步骤

1.HTML代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input+label浮动效果</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
    <div class="login-box">
        <div class="box-title">
            <h2>Welcome Eser Login Page!</h2>
        </div>
        <div class="box-body">
            <div class="input-item">
                <input type="text" required id="username">
                <span class="bar"></span>
                <label for="username">Account</label>
            </div>
             <div class="input-item">
                <input type="text" required id="pwd">
                <span class="bar"></span>
                <label for="pwd">Password</label>
            </div>
            <div class="input-item footer-btn">
                <button class="btn">Login</button>
                <span class="check-password" title="Forget Password">Forget Password?</span>
            </div>
        </div>
    </div>

</div>
</body>
</html>

2.CSS代码

代码如下（示例）：

* {
    margin: 0;
    padding: 0;

}
body{
    background: #525252;
}

#app {
    width: 500px;
    height: auto;
    margin: 100px auto;
    padding: 20px;
}

.login-box {
    border: 1px solid pink;
    border-radius: 10px;
    background: #fff;
}

.login-box .box-title {
    height: 50px;
    line-height: 50px;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #cccccc;
}
.login-box .box-body{
    position: relative;
    margin: 10px;
    font-size: 18px;
}
.input-item {
    position: relative;
    margin: 10px;
}

.input-item input {
    width:100%;
    height: 30px;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #ddd;
    display: block;
    outline: none;
}

.input-item .bar {
    width: 0;
    height: 2px;
    background: pink;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: 0.4s ease;
    transform: translate(-50%, -50%);
}

.input-item label {
    position: absolute;
    left: 0;
    top: 0;
    padding: 15px 0;
    transition: 0.5s ease;
}

.input-item input:focus ~ .bar {
    width: 100%;
}

.input-item input:valid ~ label,
.input-item input:focus ~ label {
    font-size: 16px;
    left: 0;
    color: #bbbbbb;
    transform: translateY(-20px);
}
.footer-btn{
    margin: 20px;
}
button{
    border-radius: 5px;
}
.btn {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.input-item .check-password{
    position: absolute;
    right: 15px;
    top: 15px;
    color: #2274FF;
    cursor: pointer;
}