登录页面模板的制作方法（登录页面模板的制作）
登录页面模板的制作方法（登录页面模板的制作）6）用户头像上传5）登录密码重置2）用户登录页面3）用户注册页面4）个人资料修改
介绍介绍
前面我们以及学会了Bootstrap框架和jQuery库的基本使用方法，并且已经把这两个软件包整合到了我们的TFPHP框架里面，接下来我们就可以使用它们去制作用户管理系统的视图模板了。
用户管理系统包含几个主页模板：
1）用户信息表
2）用户登录页面
3）用户注册页面
4）个人资料修改
5）登录密码重置
6）用户头像上传
7）安全问题设置
8）绑定邮箱设置
9）忘记密码页面
页面比较多，我们一点点地设计。万事开头难，福哥今天下带着大家完成先完成第一个表单页面——用户登录页面。
用户登录页面HTML
登录页面的html部分包括一个页头和一个表单。
<divclass="wrapper">
<divclass="wrapper-header">
<!--topbarbegin-->
<divclass="rowtopbar">
<divclass="navbarnavbar-text">
TFUMSv1.0-TONGFU.net
</div>
<ulclass="navml-md-auto">
<liclass="nav-item"><ahref=""class="nav-link">首页</a></li>
<liclass="nav-item"><ahref=""class="nav-link">登录</a></li>
<liclass="nav-item"><ahref=""class="nav-link">注册</a></li>
</ul>
</div>
<!--topbarend-->
</div>
<divclass="wrapper-content">
<!--loginformbegin-->
<divclass="rowlogin-form">
<divclass="col-sm-12">
<h3class="text-center">登录</h3>
<p>请输入正确的用户名和密码登录用户管理系统</p>
<form>
<divclass="form-group">
<label>用户名</label>
<inputclass="form-control"type="text"name="user"/>
</div>
<divclass="form-group">
<label>密码</label>
<inputclass="form-control"type="password"name="pass"/>
</div>
<divclass="form-groupoverflow-hidden">
<labelclass="float-left">
<inputtype="checkbox"name="remember"value="Y"/>
保存登录状态
</label>
<ahref=""class="float-right">忘记密码</a>
</div>
<divclass="form-group">
<buttonclass="btnbtn-primarybtn-smform-control">登录</button>
</div>
</form>
</div>
</div>
<!--loginformend-->
</div>
<divclass="wrapper-footer">
</div>
</div>
CSS
用户登录页面的CSS也是一个top bar和一个login form两个部分。
/**
*topbar
*/
.topbar{
padding:012px;
margin-bottom:12px;
border-bottom:1pxsolid#eee;
}
.topbara{
color:#333;
}
.topbara:hover{
color:#007bff;
}
/**
*loginform
*/
.login-form{
margin:0auto;
width:350px;
}
用户登录页面
首先，因为这是TFUMS系统的第一个模板，所以福哥先设计了页头的样式。这个页头也会作为其他页面的共用的页头。页头使用了bs的nav样式组的样式，简化了自己写CSS的工作。
其次，表单部分使用了bs的form-group样式作为每一行表单项的容器样式，加上label和form-control简简单单就把一个漂亮的表单做出来了。
还有福哥使用浮动加清除实现了“保存登录状态”和“忘记密码”的左右布局设计。
最后，福哥给button增加了form-control样式，使按钮撑满了整个容器，看起来比较工整了。
总结今天我们完成了第一个表单页面的模板，包括：HTML和CSS部分。有了这个基础之后，再去制作其他表单页面就容易多了。
下一课我们将尝试完成用户注册页面、忘记密码页面、登录密码重置三个页面的模板的制作。
https://m.tongfu.net/home/35/blog/512901.html
