form表单的布局制作

效果如图：
 
注意点：
    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>

 

posted @ 2014-10-29 18:17  ayguo  阅读(826)  评论(0)  编辑  收藏  举报