Homework-01, form表单布局

最新推荐文章于 2023-12-16 10:15:00 发布

_洋

最新推荐文章于 2023-12-16 10:15:00 发布

阅读量503

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/mantou_riji/article/details/121090403

版权

Homework-01, form表单布局

实现如下效果
在这里插入图片描述

原理与思路
所有文本，密码的input元素，全局横向占用最大，圆角，内边距；
声明form-group类，放置说明与输入域的行容器，横向弹性布局，元素居中对齐；
声明form-label类，放置说明，文本右对齐，占20%，注意弹性百分比的占用属性；
声明form-input类，放置输入域，互交的输入域可能是多个，因此是容器，占80%；
元素间，通过内边距推开

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {/*除去原始样式*/
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            /*border: 1px solid red;*/
        }

        /* 容器 */
        .main {
            /*border: 1px solid red;*/
            width: 800px;
            padding: 15px;
        }

    </style>
    <link href="form.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
    <form>
        <div class="form-group">
            <label class="form-label">用户名</label>
            <div class="form-input">
                <input type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">密码</label>
            <div class="form-input">
                <input type="password">
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">性别</label>
            <div class="form-input">
               <input type="radio" name="sex">男
               <input type="radio" name="sex">女
            </div>
        </div>
    </form>
</div>
</body>
</html>

CSS

/*声明form-group类，放置说明与输入域的行容器，横向弹性布局，元素居中对齐；*/
div.form-group{
    display:flex;
    justify-content:center;
    align-content: center;
}

/*声明form-label类，放置说明，文本右对齐，占20%，注意弹性百分比的占用属性；*/
label.form-label{
     padding-top: 15px;
     padding-right: 10px;
     text-align: right;
     width: 20%;
}
label.form-label:hover{
    text-shadow: 8px 8px 0px lightcoral;
}

/*声明form-input类，放置输入域，互交的输入域可能是多个，因此是容器，占80%；*/
div.form-input{
    padding: 5px;
    width: 80%;
}

input[type="text"],input[type="password"]{/*用逗号隔开*/
    border-radius: 10px;
    padding:10px;
    width: 80%;
    transition: 1s;
}
input[type="text"]:hover,input[type="password"]:hover{
    width:100%;
    height: 50px;
    box-shadow: 5px 5px 5px gray;

    outline: none;/*自己设置边框*/
    border: 1px solid black;
}
input[type="radio"]{
    display: inline-block;
    margin: 15px;
    transition: 1s;
}
input[type="radio"]:hover{
    width:10%;
    height: 50px;
    box-shadow: 5px 5px 5px gray;
}