绍

介绍

前面我们以及学会了Bootstrap框架和jQuery库的基本使用方法，并且已经把这两个软件包整合到了我们的TFPHP框架里面，接下来我们就可以使用它们去制作用户管理系统的视图模板了。

用户管理系统包含几个主页模板：

1）用户信息表

2）用户登录页面

3）用户注册页面

4）个人资料修改

5）登录密码重置

6）用户头像上传

7）安全问题设置

8）绑定邮箱设置

9）忘记密码页面

页面比较多，我们一点点地设计。万事开头难，福哥今天下带着大家完成先完成第一个表单页面——用户登录页面。

用户登录页面

HTML

登录页面的html部分包括一个页头和一个表单。

<div class="wrapper">

    <div class="wrapper-header">

        <!-- top bar begin -->
        <div class="row topbar">
            <div class="navbar navbar-text">
                TFUMS v1.0 - TONGFU.net
            </div>
            <ul class="nav ml-md-auto">
                <li class="nav-item"><a href="" class="nav-link">首页</a></li>
                <li class="nav-item"><a href="" class="nav-link">登录</a></li>
                <li class="nav-item"><a href="" class="nav-link">注册</a></li>
            </ul>
        </div>
        <!-- top bar end -->

    </div>

    <div class="wrapper-content">

        <!-- login form begin -->
        <div class="row login-form">
            <div class="col-sm-12">
                <h3 class="text-center">登录</h3>
                <p>请输入正确的用户名和密码登录用户管理系统</p>
                <form>
                    <div class="form-group">
                        <label>用户名</label>
                        <input class="form-control" type="text" name="user" />
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input class="form-control" type="password" name="pass" />
                    </div>
                    <div class="form-group overflow-hidden">
                        <label class="float-left">
                            <input type="checkbox" name="remember" value="Y" />
                            保存登录状态
                        </label>
                        <a href="" class="float-right">忘记密码</a>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm form-control">登录</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- login form end -->

    </div>

    <div class="wrapper-footer">

    </div>

</div>

CSS

用户登录页面的CSS也是一个top bar和一个login form两个部分。

/**
 * top bar
 */
.topbar{
    padding: 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.topbar a{
    color: #333;
}
.topbar a:hover{
    color: #007bff;
}

/**
 * login form
 */
.login-form{
    margin: 0 auto;
    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

要从零开始开发一个开源项目，这个项目的目的很简单：新人可以练手，一步一步搭建项目，把时下流行的技术整合进来，在用这些技术的特性来实现具体业务功能，而对于有经验的老鸟可以把自学的技术在项目中得以实践。

在这里插入图片描述

琢磨了挺长时间，前段时间工作比较忙、家中事情也比较多，导致最近才着手弄。

感兴趣的同学可以关注一波，项目进度可能会缓慢，但脚步绝不会停止

作为一个后端程序员，虽然平时也会做一些管理后台的页面，可那都是本着能用就行的原则，美观都是次要的。但项目要对外开源这可是门面，不美美哒多没面子，所以选一个酷炫的页面模板成了首要任务，选了10个模板出来，大伙给参谋下。

源码获取方式：关注转发之后私信回复【源码】来免费获取到这10个后台模板源码

们在进行开发的时候，需要进行前端的设计，但是如果都是自己写的话，需要写大量的CSS。

如果套用的模板的话，势必会省很大的时间和精力。

经过一段时间的整理，孟哥整理了11套高质量的后台模板，非常奈斯。

需要的，可以自取。

关注+转发+评论。

点击了解更多（z9tl）