Homework-01, form表单布局

Homework-01, form表单布局

实现如下效果
Homework-01, form表单布局_第1张图片

原理与思路
所有文本,密码的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;
}

你可能感兴趣的:(css,前端)