先捋捋需要跳转的几个界面的编写：
1.登录界面，见https://blog.csdn.net/qq_44935015/article/details/90113838
2.前端浏览主页
3.后台界面
前端浏览主页
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"></meta> <title>首页</title> <link rel="stylesheet" href="bootstrap.min.css" /> <script type="text/javascript" src="bootstrap.min.js"></script> </head> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } .data_list { border: 1px solid #E5E5E5; padding: 10px; background-color: #FDFDFD; margin-top: 15px; } .data_list .data_list_title { font-size: 15px; font-weight: bold; border-bottom: 1px solid #E5E5E5; padding-bottom: 10px; padding-top: 5px; } .data_list .data_list_title img { vertical-align: top; } </style> <body> <!--导航条浮动，固定在上方，不会随着滚动条滑下而消失--> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <!--标题--> <a class="brand" href="#">显示</a> <!--导航条具有响应式功能，主要是在屏幕较小的设备也能用--> <div class="nav-collapse collapse"> <!--导航标签，H5就有了--> <ul class="nav"> <li > <a href="#"><i class="icon-home"></i> 主页</a> </li> <li> <a href="#"><i class="icon-book"></i> 分类管理</a> </li> <li > <a href="#"><i class="icon-user"></i> 个人中心</a> </li> </ul> </div> <!--导航条内的表单，居右--> <form name="myForm" class="navbar-form pull-right" method="post" action=""> <input class="span2" id="s_title" name="s_title" type="text" style="margin-top:5px;height:30px;" placeholder="标题"> <button type="submit" class="btn" onkeydown="if(event.keyCode==13) myForm.submit()"><i class="icon-search" ></i> 搜索</button> </form> </div> </div> </div> <div class="container"> <!--流式，按百分比分列--> <div class="row-fluid"> <div class="span9"> <!--这里的内容经常会变化--> <div class="data_list"> <div class="data_list_title"> <img src="f.JPG" /> 最新浏览 </div> </div> </div> <div class="span3"> <div class="data_list"> <div class="data_list_title"> <img src="c.JPG" /> 个人中心 </div> </div> <div class="data_list"> <div class="data_list_title"> <img src="d.JPG" /> 按类别 </div> </div> <div class="data_list"> <div class="data_list_title"> <img src="e.JPG" /> 按日期 </div> </div> </div> </div> </div> </body> </html>后台界面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后台管理</title> <link rel="stylesheet" href="bootstrap.min.css" /> <script type="text/javascript" src="bootstrap.min.js"></script> </head> <style type="text/css"> body { padding: 20px; } .headLeft { float: left; } .headRight { padding-top: 40px; padding-left: 330px; } .search { margin-bottom: 10px; } .search .toolbar {} </style> <!--必须使用较新版本的BootStrap才有如下效果--> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand " href="#">后台管理</a> </div> <div id="navbar" class="navbar-right"> <a class="navbar-brand" href="#">当前用户：xx</a> </div> </div> </nav> </div> </div> <div class="row" style="padding-top: 45px"> <div class="col-md-3"> <div class="list-group"> <!--激活，作为标题--> <a href="#" class="list-group-item active "> 系统菜单 </a> <a href="#" class="list-group-item">管理一</a> <a href="#" class="list-group-item">管理二</a> <a href="#" class="list-group-item">管理三</a> <a href="#" class="list-group-item">退出</a> </div> </div> <div class="col-md-9"> <div> <ol class="breadcrumb"> <li><span class="glyphicon glyphicon-home" ></span> <a href="#">主页</a> </li> <li class="active"></li> </ol> </div> <div align="center" style="padding-top: 50px;"> <h1>个人后台管理</h1> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div align="center" style="padding-top: 200px"> </div> </div> </div> </div> </body> </html>