用将近一周的时间进行了管理员用户界面的设计，实现了其中的几个界面——
首先附上html代码——
infor界面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>管理员界面</title>
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="__STATIC__/index/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="__STATIC__/index/css/fg-main1.css" >
<link rel="stylesheet" href="__STATIC__/index/css/morris-0.4.3.min.css">
<link rel="stylesheet" href="__STATIC__/index/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="__STATIC__/index/css/include.css" >
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default top-navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">哈哈</a></li>
<li><a href="#">咨询</a></li>
<li class="dropdown">
<a href="index.html" class="dropdown-toggle" data-toggle="dropdown">
菜单 <b class="caret"></b>
</a>
<ul class="dropdown-menu ">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="divider"></li>
<li><a href="#">4</a></li>
<li class="divider"></li>
<li><a href="#">5</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="index.html"><i class="fa fa-dashboard"></i> 主页 </a>
</li>
<li>
<a href="infor.html" class="active-menu"><i class="fa fa-desktop"></i> 个人信息 </a>
</li>
<li>
<a href="manage.html"><i class="fa fa-bar-chart-o"></i> 管理教师 </a>
</li>
<li>
<a href="rank.html"><i class="fa fa-qrcode"></i> 量化排行 </a>
</li>
<li>
<a href="table.html"><i class="fa fa-table"></i> 查询教师 </a>
</li>
<li>
<a href="form.html"><i class="fa fa-edit"></i> 排课 </a>
</li>
<!--
<li>
<a href="#"><i class="fa fa-sitemap"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li>
<a href="#">Second Level Link</a>
</li>
<li>
<a href="#">Second Level Link</a>
</li>
<li>
<a href="#">Second Level Link<span class="fa arrow"></span></a>
<ul class="nav nav-third-level collapse">
<li>
<a href="#">Third Level Link</a>
</li>
<li>
<a href="#">Third Level Link</a>
</li>
<li>
<a href="#">Third Level Link</a>
</li>
</ul>
</li>
</ul>
</li> -->
<li>
<a href="empty.html"><i class="fa fa-fw fa-file"></i> 空白页 </a>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div id="page-inner">
<!-- 页头 -->
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
个人信息 <small>修改或完善您的信息</small>
</h1>
</div>
</div>
<!-- 页面 -->
<div class="row">
<!-- 个人信息 -->
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
必填信息
</div>
<div class="panel-body">
<div class="form-bottom">
<form role="form" action="{:url('check')}" method="post" class="register-form" id="myform">
<div class="form-group">
<label>用户名</label>
<input name="id" placeholder="用户名" class="form-control" id="id">
</div>
<div class="form-group">
<label>邮箱</label>
<input name="e-mail" placeholder="邮箱" class="form-control required email" id="e-mail">
</div>
<div class="form-group">
<label>手机号</label>
<input type="text" name="phone" placeholder="手机号" class="form-control " id="phone">
</div>
<div class="form-group" >
<label>密码</label>
<input type="password" name="pass" placeholder="密码" class="form-password form-control " id="pass">
</div>
<div class="form-group">
<label>确认密码</label>
<input type="password" name="rpass" placeholder="确认密码" class="form-password form-control " id="rpass">
</div>
<div class="form-group">
<label>姓名</label>
<input type="text" name="name" placeholder="姓名" class="form-control" id="name">
</div>
<div class="form-group">
<label>头像</label>
<div class="row" style="margin-top:10px;">
<div class=" col-md-2">
<div class="imgbox">
<img class="imgh" src="__STATIC__/index/img/backgrounds/1.jpg" alt="">
</div>
</div>
<div class="col-md-2" style="margin-left:30px;">
<p>请上传个人一寸免冠照片</p>
<button class="btn">上传头像</button>
</div>
</div>
</div>
<button type="submit" class="btn">修改</button>
</form>
</div>
</div>
</div>
</div>
<!-- 当前用户数量 -->
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
必填信息
</div>
<div class="panel-body" style="padding: 0;">
<div class="num-show">
<div>
<div class="carousel-tile carousel vertical slide">
<div class="carousel-inner">
<div class="item active">
<div class="tile red">
<div class="tile-icon">
<i class="fa fa-bar-chart-o s64"></i>
</div>
<div class="tile-content">
<div class="number countTo" data-from="0" data-to="107">107</div>
<h3 class="tile-h3">管理员数量</h3>
</div>
</div>
</div>
<div class="item">
<div class="tile orange">
<!-- tile start here -->
<div class="tile-icon">
<i class="fa fa-bar-chart-o s64"></i>
</div>
<div class="tile-content">
<div class="number countTo" data-from="0" data-to="5">5</div>
<h3>Settings changed</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<div class="panel panel-default">
<div class="panel-heading">
必填信息
</div>
<div class="panel-body" style="padding:0;">
<img src="__STATIC__/index/img/backgrounds/b3.png" alt="" style="width: 100%;height: 495px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="__STATIC__/index/bootstrap/js/jquery-3.31.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/bootstrap/js/bootstrap.min.js"></script
<script src="__STATIC__/index/js/js/jquery.sprFlat.js"></script>
manage界面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>管理员界面</title>
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="__STATIC__/index/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="__STATIC__/index/css/fg-main1.css" >
<link rel="stylesheet" href="__STATIC__/index/css/morris-0.4.3.min.css">
<link rel="stylesheet" href="__STATIC__/index/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="__STATIC__/index/css/include.css" >
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default top-navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">哈哈</a></li>
<li><a href="#">咨询</a></li>
<li class="dropdown">
<a href="index.html" class="dropdown-toggle" data-toggle="dropdown">
菜单 <b class="caret"></b>
</a>
<ul class="dropdown-menu ">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="divider"></li>
<li><a href="#">4</a></li>
<li class="divider"></li>
<li><a href="#">5</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a href="index.html"><i class="fa fa-dashboard"></i> 主页 </a>
</li>
<li>
<a href="infor.html"><i class="fa fa-desktop"></i> 个人信息 </a>
</li>
<li>
<a href="manage.html" class="active-menu"><i class="fa fa-bar-chart-o"></i> 管理教师 </a>
</li>
<li>
<a href="rank.html"><i class="fa fa-qrcode"></i> 量化排行 </a>
</li>
<li>
<a href="table.html"><i class="fa fa-table"></i> 查询教师 </a>
</li>
<li>
<a href="form.html"><i class="fa fa-edit"></i> 排课 </a>
</li>
<!--
<li>
<a href="#"><i class="fa fa-sitemap"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse">
<li>
<a href="#">Second Level Link</a>
</li>
<li>
<a href="#">Second Level Link</a>
</li>
<li>
<a href="#">Second Level Link<span class="fa arrow"></span></a>
<ul class="nav nav-third-level collapse">
<li>
<a href="#">Third Level Link</a>
</li>
<li>
<a href="#">Third Level Link</a>
</li>
<li>
<a href="#">Third Level Link</a>
</li>
</ul>
</li>
</ul>
</li> -->
<li>
<a href="empty.html"><i class="fa fa-fw fa-file"></i> 空白页 </a>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div id="page-inner">
<!-- 页头 -->
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
教书管理 <small>查询修改教师信息</small>
</h1>
</div>
</div>
<!-- 页面 -->
<div class="row">
<!-- 个人信息 -->
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<form class="" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<select class="form-control input-group-select" id="sel1" style="width:auto">
<option class="active">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default">搜索</button>
</div>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
</div><!-- /.row -->
</form>
</div>
<div class="panel-body">
<table class="table table-bordered table-hover">
<th>账号</th>
<th>姓名</th>
<th>邮箱</th>
<th>手机</th>
<th>年龄</th>
<th>GC</th>
<th>school_id</th>
<th>修改</th>
<th>删除</th>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td><button class="btn btn-default">修改</button></td>
<td><button class="btn btn-default">删除</button></td>
</tr>
</table>
</div>
</div>
</div>
<!-- 当前用户数量 -->
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="__STATIC__/index/js/register.js"></script>
<script src="__STATIC__/index/js/jquery-3.31.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/bootstrap/js/bootstrap.min.js"></script>
虽然html代码并不难写，但对于一个新书来说，最难的地方在于页面的整体布局，即那一部分位于页面的什么位置，如何设置内外边距，position属性等等，博主也是摸爬滚打了很久才形成了一套自己的体系，css的调试过程才是最耗时的环节。
此外，博主在网上学到了一个简单的js方法，用于实现数字的动态显示，让页面更加灵动：
当该页面加载完成以及鼠标在该数字上悬停时，该数字会从一个数快速递增到另一个数，实现一个动态的过程
这里用到了jquery中的一些方法：
//tile functions
plugin.tile = function () {
//cahce all tiles
var tiles = $('.tile');
//count numbers
if(plugin.settings.tile.countNumbers) {
var numbers = tiles.find('.tile-content>.number').not('.notCount');
numbers.addClass('countTo');
//get number
numbers.each(function(index) {
//add data driven options
$(this).attr('data-from', 0);
$(this).attr('data-to', $(this).html());
//console.log($(this).html());
});
//activate plugin
$('.countTo').countTo({
speed: 1000,
refreshInterval: 50
});
}
tiles.hover(
function () {
//in
tileNumber = $(this).find('.countTo');
//activate plugin
tileNumber.countTo({
speed: 200,
refreshInterval: 50
});
},
function () {
//out
}
);
}