CSS之登录表单

来源：互联网发布：Ubuntu sambaclient 编辑：程序博客网时间：2024/05/19 04:55
<!DOCTYPE html><html><head>   <meta charset="utf-8">    <title></title>    <style type="text/css">        .user_login{            width: 210px;            padding: 1px;            border:1px solid #DBDBD0;            background-color: #FFFFFF;            position: relative;            float: right;        }        /*调整登录框中全局样式 调整内补丁 文字字体等基本样式*/        .user_login *{            margin: 0;            padding: 0;            font: normal 12px/1.5em "宋体",Verdand,Lucida,Arial,Helvetica,sans-serif;        }    /*设置标题样式*/        .user_login h3{            height: 24px;            line-height: 24px;            font-weight: bold;            text-align: center;            background-color: #EEEEE8;        }        /*设置登录框中内容的补丁，与边框产生空隙*/        .user_login .content {            padding: 5px;        }        /*表单直接的间距表单*/        .user_login .frm_cont{            margin-bottom: 5px;        }        /*鼠标经过label时为手型*/        .user_login .frm_cont label{            cursor: pointer;        }        .user_login .userName input,.user_login .userPsw input,.user_login .validate input{            width: 146px;            height: 17px;            padding: 3px 2px 0;            border:1px solid #A9A98D;        }        .user_login .validate input{        width: 36px;        text-align: center;        margin-right: 5px;        }        .user_login .keepLogin{            padding-left: 48px;        }        .user_login .keepLogin input{            margin-right: 5px;            vertical-align: -1px;        }        .user_login .btns{            text-align: center;        }        .user_login .btns a{            padding: 3px 4px 2px;            text-decoration: none;            color: #00000;        }        .user_login .btns button{            height: 21px;            cursor: pointer;         }        .user_login .btns button,.user_login .btns a{            border:1px solid #A9A98D;            background:url(1.jpg) repeat-x 0 0;        }    </style></head><body><div  class="user_login">    <h3>用户登录</h3>    <div class="content">        <form method="post" action="">          <div class="frm_cont username">            <label for="userName">用户名:</label>            <input type="text" id='userName'/>          </div>          <div  class="frm_cont userPsw">            <label for="userPsw">密码:</label>            <input type="password" id="userPsw" />          </div>          <div class="frm_cont validate">            <label for="validate">验证码:</label>            <input type="text" id="validate"/>            <img src="1.jpg"/>          </div>          <div class="frm_cont keepLogin">          <input type="checkbox" id="keepLogin"/>          <label for="keepLogin">记住我的登录信息</label>          </div>          <div class="btns">            <button type="submit" class="btn_login">登录</button>            <a href="#" class="reg">用户注册</a>          </div>        </form>    </div></div></body></html>
效果如下图:
这里写图片描述
0 0