form表单的布局制作

2021-09-12 23:50:00

效果如图：

注意点：

1，input表单里面有一个图标，给input加一个背景图片，然后在加一个padding调整。

2，当input框获取到焦点时，输入框border显示蓝色（或其他颜色）。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> form表单 </title>
<style>
*{
    padding:0px;
    margin:0px;
    font:14px/1.5 \'微软雅黑\';
    border:none;
}
body{
    text-align: center;
    padding-top: 50px;
}
form p{
    margin-bottom: 20px;
}
form p label{
    margin-right: 10px;
}
form p input{
    padding: 7px 7px 7px 45px;
    border: 1px solid #ccc;
    width: 350px;
    outline: 0;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    background:url(\'./img/rl-sprite.png\') no-repeat 0px 0px;
}
form p input:focus{
    border:1px solid #66afe9;
}
#name{
    background-position: -84px -727px;
}
#email{
    background-position: -84px -679px;
}
#pwd{
    background-position: -84px -775px;
}
</style>
</head>
<body>

    <form>
        <p>
            <label for=\'name\'>姓名</label>
            <input type="text" id="name" placeholder="请输入姓名" />
        </p>
        <p>
            <label for=\'email\'>邮箱</label>
            <input type="text" id="email" placeholder="请输入邮箱" />
        </p>
        <p>
            <label for=\'pwd\'>密码</label>
            <input type="text" id="pwd" placeholder="请输入密码" />
        </p>
    </form>


</body>
</html>