后台管理系统主页面

Original 2019-05-21 15:06:51 277
abstract:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="../images/logor.png">
<!-- 导入bootstrap样式文件 -->
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css">
<!-- 导入支持文件:jquery.js -->
<script src="../static/js/jquery.min.js"></script>
<!-- 导入bootstrap的js文件 -->
<script src="../static/bootstrap/js/bootstrap.js"></script>
<title>后台管理系统</title>
<style>
.navbar-inverse{background: #333744;margin-bottom: 0px;border: none;border-radius: 0px;}
.main{position: absolute;width: 140px;height: 500px; background:#337ab7 ; text-align: center;}
.main a{border: none;width: 140px;border-radius: 0px; }
#left_li a{width: 140px;border-radius: 0px; background: #42485B;color: #fff;}
#left_li a:hover{background: #42442B;}
</style>
</head>
<body>
<!-- 头部导航 -->
<nav class="navbar navbar-inverse" >
<div class="container-fluid" >      
<div class="navbar-header" >      
<a class="navbar-brand" href="#" >后台管理系统</a>
</div>      
<ul class="nav navbar-nav navbar-right" >
<li><img src="../images/avatar.png" alt=""></li>            
<li ><a href="">admin <span>[系统管理员]</span> </a></li>
<li ><a href="#" >退出</a></li>
</ul>
</div>
</div>
</nav>


<!-- 左侧菜单 -->
<div class="main" >

<a href="#declare1" class="btn btn-primary" data-toggle="collapse">管理员管理</a>
<div class="collapse" id="declare1">
<div class="btn-group-vertical" id="left_li">
<a href="" class="btn btn-default">管理员列表</a>
</div>
</div>

<a href="#declare2" class="btn btn-primary" data-toggle="collapse">权限管理</a>
<div class="collapse" id="declare2">
<div class="btn-group-vertical" id="left_li">
<a href="" class="btn btn-default">角色列表</a>
<a href="" class="btn btn-default">菜单列表</a>            
</div>
</div>

<a href="#declare3" class="btn btn-primary" data-toggle="collapse">新闻管理</a>
<div class="collapse" id="declare3">
<div class="btn-group-vertical" id="left_li">
<a href="" class="btn btn-default">新闻列表</a>
<a href="" class="btn btn-default">新闻分类</a>            
</div>
</div>


</div>




<!-- 右侧主体 -->

<div style="position: absolute;left:140px;right: 0;">
<iframe class="embed-responsive-item" id="main_frame" src="/admins/home/welcome" style="width: 100%;height: 100%;" frameborder="0" scrolling="auto" ></iframe>
</div>


</body>
</html>


Correcting teacher:查无此人Correction time:2019-05-22 09:23:51
Teacher's summary:完成的不错。你这个是后台管理页面搭建吧, 课程是轮播图吧。继续加油吧。

Release Notes

Popular Entries