用户注册画面设计(一): 使用bootstrap2.0设计用户注册画面

来源：互联网发布：java string split n 编辑：程序博客网时间：2024/06/06 08:24

日期： 2016-8-4

内容：使用bootstrap设计用户注册画面。

设计注册表单样式:

register.html:

<!DOCTYPE html><!--作者：offline时间：2016-08-04描述：使用html5设计一个用户注册表单这个注册表单包含了一下的字段信息:1、用户邮箱(作为用户名):userEmail;2、用户手机: userPhone;3、用户密码：  userPassword;4、验证密码: reUserPassword;接下来是一个注册按钮。在这里使用到了bootstrap2.0和jquery1.8.3--><html><head><!--        作者：offline        时间：2016-08-04        描述：引入bootstrap和jquery（由于bootstrap的js是依赖于jquery实现的，因此在导入bootstrap.min.js之前应该先引入jquery）        -->        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />        <script type="text/javascript" src="js/jquery/jquery-1.8.3.js" ></script>        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>                <!--        作者：offline        时间：2016-08-04        描述：引入外部样式表        -->        <link rel="stylesheet" href="css/register/register.css" /><meta charset="utf-8" /><title>user register block</title></head><body><!--        作者：offline        时间：2016-08-04        描述：编写用户注册表单        -->        <div class="formStyle">        <form class="form-horizontal" action="" id="userRegister" method="post">        <div class="formInput">        <div class="control-group success">    <div class="controls">    <div class="input-prepend">    <span class="add-on imageStyle"><i class="icon-envelope iconStyle"></i></span>      <input type="text" class="span4 textStyle" id="userEmail" placeholder="Email">    </div>    </div>    </div>    <div class="control-group success">    <div class="controls">    <div class="input-prepend">    <span class="add-on imageStyle"><i class="icon-list-alt iconStyle"></i></span>    <input type="text" class="span4 textStyle" id="userPhone" placeholder="Phone">    </div>    </div>    </div><div class="control-group success">    <div class="controls"><div class="input-prepend"><span class="add-on imageStyle"><i class="icon-lock iconStyle"></i></span><input type="text" class="span4 textStyle" id="userPassword" placeholder="password"></div>    </div>    </div>    <div class="control-group success">    <div class="controls">    <div class="input-prepend">    <span class="add-on imageStyle"><i class="icon-lock iconStyle"></i></span>    <input type="text" class="span4 textStyle" id="userPassword" placeholder="rePassword">    </div>    </div>    </div>    <div class="control-group">    <div class="controls">      <input type="submit" class="btn btn-success" id="submitStyle" value="REGISTER" id="register">    </div>    </div>        </div>        </form>        </div>        </body></html>

register.css:

/** * 设置form表单的样式 */#userRegister{width: 50%;height: 50%;margin-top: 20%;margin-left: 25%;border:  dotted 1px red;position: absolute;display: block;}.textStyle{height: 33px !important;}.imageStyle{height: 33px !important;width: 33px !important;}/** * 设置图标的样式 */.iconStyle{margin-top: 9px;}/** * 设置注册按钮的样式 */#submitStyle{width: 345px !important;height: 43px;}.formInput{margin-top: 100px;}

0 0