图书管理系统之普通⽤户、超级管理员页⾯布局（四）
图书管理系统之普通⽤户、超级管理员页⾯布局（四）
前⾔：
在上⼀篇中的登录账号返回不同的控制器视图的⽅法已经完成，现在要做的就是将普通⽤户和超级管理员的⼀个模板给搭建在对应的控制器视图之中，当页⾯跳转的时候就会展现给我们
回顾：
这是上⼀篇创建的⼀个区域控制器，分别对应普通⽤户、超级管理员，接下来的对应视图就写在下⾯的两个不同的控制器视图中Content就是存放我们需要的⼀些外部⽂件
⼀、普通⽤户
1.1、效果图
模板主要是在⽹上下来过来，⾃⼰整理出来的，并且也是⼀套响应式布局
1.2、布局代码
布局就不多说，直接复制代码修改
<html>
<head>
<meta name="viewport"content="width=device-width"/>
<title>Index</title>
<link href="#"rel="icon"/>
<link href="~/Areas/JumpFile/Content/css/bootstrap.min.css"rel="stylesheet"/>
<link href="~/Areas/JumpFile/Content/css/font-awesome.min.css"rel="stylesheet"/>
<link href="~/Areas/JumpFile/Content/css/animate.css"rel="stylesheet"/>
<link href="~/Areas/JumpFile/Content/css/style.css"rel="stylesheet"/>
</head>
<body class="fixed-sidebar full-height-layout gray-bg" >
<!--⼤盒⼦-->
<div id="wrapper">
<!--左侧导航开始-->
<nav class="navbar-default navbar-static-side"role="navigation">
<div class="nav-close">
<i class="fa fa-times-circle"></i>
</div>
<div class="sidebar-collapse">
<ul class="nav"id="side-menu">
<!-- 修改个⼈质料 -->
<li class="nav-header">
<div class="dropdown profile-element">
<!--头像-->
<span><img alt="image"class="img-circle"src="~/Areas/JumpFile/Content/img/profile_small.jpg"/></span>
<a data-toggle="dropdown"class="dropdown-toggle"href="#">
<span class="clear">
<span class="block m-t-xs"><strong class="font-bold">Admin</strong></span>
<span class="text-muted text-xs block">普通⽤户<b class="caret"></b></span>
</span>
</a>
<ul class="dropdown-menu animated fadeInRight m-t-xs">
<li>
<a class="J_menuItem"href="form_avatar.html">修改头像</a>
</li>
<li>
<a class="J_menuItem"href="profile.html">个⼈资料</a>
</li>
<li>
<a class="J_menuItem"href="contacts.html"></a>
</li>
<li>
<a class="J_menuItem"href="mailbox.html">信箱</a>
</li>
<li class="divider"></li>
<li>
<a href="/Login/Login">安全退出</a>
</li>
</ul>
</div>
</li>
<!-- 主页 -->
<li>
<a href="#">
<i class="fa fa-home"></i>
<span class="nav-label">借阅管理</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem"href="www.csdn/"data-index="0">我的主页</a>
</li>
<li>
<a class="J_menuItem"href="www.csdn/">借阅书籍</a>
</li>
<li>
<a class="J_menuItem"href="www.csdn/">代换书记</a>
</li>
<li>
<a class="J_menuItem"href="www.csdn/">借阅记录</a>
</li>
<!-- 跳转新的页⾯ -->
<li>
<a href="www.csdn/"target="_blank">我的笔记</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!--左侧导航结束-->
<!--右侧部分开始-->
<div id="page-wrapper"class="gray-bg dashbard-1">
<!-- 顶部第⼀部份 -->
<div class="row border-bottom">
<nav class="navbar navbar-static-top"role="navigation" >
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
href="#"><i class="fa fa-bars"></i></a>
<!-- 顶部查内容 -->
<form role="search"class="navbar-form-custom"method="post"action="search_results.html">
<div class="form-group">
<input type="text"placeholder="请输⼊您需要查的内容 …"class="form-control"name="top-search"
id="top-search">
</div>
</form>
</div>
<!-- 顶部右侧导航 -->
<ul class="nav navbar-top-links navbar-right">
<!-- 邮箱 -->
<li class="dropdown">
<a class="dropdown-toggle count-info"data-toggle="dropdown"href="#">
<i class="fa fa-envelope"></i><span class="label label-warning">16</span>
</a>
<ul class="dropdown-menu dropdown-messages">
<li class="m-t-xs">
<div class="dropdown-messages-box">
<a href="profile.html"class="pull-left">
<img alt="image"class="img-circle"src="~/Areas/JumpFile/Content/img/a7.jpg">
</a>
<div class="media-body">
<small class="pull-right">46⼩时前</small>
<strong>⼩四</strong>这个在⽇本投降书上签字的军官，建国后⼀定是个不⼩的⼲部吧？
<br>
<small class="text-muted">3天前 2016.11.8</small>
</div>
</div>
免费管理系统html模板</li>
<li class="divider"></li>
<li>
<div class="dropdown-messages-box">
<a href="profile.html"class="pull-left">
<img alt="image"class="img-circle"src="~/Areas/JumpFile/Content/img/a4.jpg">
</a>
<div class="media-body ">
<small class="pull-right text-navy">25⼩时前</small>
<strong>国民岳⽗</strong>如何看待“男⼦不满⾃⼰爱⽝被称为狗，刺伤路⼈”？——这⼈⽐⽝还凶
<br>
<small class="text-muted">昨天</small>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="text-center link-block">
<a class="J_menuItem"href="mailbox.html">
<i class="fa fa-envelope"></i><strong>查看所有消息</strong>
</a>
</div>
</li>
</ul>
</li>
<!-- 信息 -->
<li class="dropdown">
<a class="dropdown-toggle count-info"data-toggle="dropdown"href="#">
<i class="fa fa-bell"></i><span class="label label-primary">8</span>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="mailbox.html">
<div>
<i class="fa fa-envelope fa-fw"></i>您有16条未读消息
<span class="pull-right text-muted small">4分钟前</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="profile.html">
<div>
<i class="fa fa-qq fa-fw"></i> 3条新回复
<span class="pull-right text-muted small">12分钟钱</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<div class="text-center link-block">
<a class="J_menuItem"href="notifications.html">
<strong>查看所有</strong>
<i class="fa fa-angle-right"></i>
</a>
</div>
</li>
</ul>
</li>
<!-- 购买 -->
<li class="hidden-xs">
<a href="index_v1.html"class="J_menuItem"data-index="0">
<i class="fa fa-cart-arrow-down"></i>购买
</a>
</li>
<!-- 主题 -->
<li class="dropdown hidden-xs">
<a class="right-sidebar-toggle"aria-expanded="false">
<i class="fa fa-tasks"></i>主题
</a>
</li>
</ul>
</nav>
</div>
<!-- 中间顶部第⼆⾏导航 -->
<div class="row content-tabs">
<button class="roll-nav roll-left J_tabLeft">
<i class="fa fa-backward"></i>
</button>
<nav class="page-tabs J_menuTabs">
<div class="page-tabs-content">
<a href="javascript:;"class="active J_menuTab"data-id="index_v1.html">⾸页</a>
</div>
</nav>
<button class="roll-nav roll-right J_tabRight">
<i class="fa fa-forward"></i>
</button>
<!-- 右侧 -->
<div class="btn-group roll-nav roll-right">
<button class="dropdown J_tabClose"data-toggle="dropdown">
关闭操作<span class="caret"></span>
</button>
<ul role="menu"class="dropdown-menu dropdown-menu-right">
<li class="J_tabShowActive">
<a>定位当前选项卡</a>
</li>
<li class="divider"></li>
<li class="J_tabCloseAll">
<a>关闭全部选项卡</a>
</li>
<li class="J_tabCloseOther">
<a>关闭其他选项卡</a>
</li>
</ul>
</div>
<a href="/Login/Login"class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i>退出</a> </div>
<div class="row J_mainContent"id="content-main">
<iframe class="J_iframe"name="iframe0"width="100%"height="100%"src=""frameborder="0"
data-id=""seamless>
</iframe>
</div>
<!-- 页脚说明 -->
<div class="footer">
<div class="pull-right">
© 2021-6-19<a href="#"target="_blank">图书管理系统</a>
</div>
</div>
</div>
<!--右侧部分结束-->
<!--展开主题开始-->
<div id="right-sidebar">
<div class="sidebar-container">
<ul class="nav nav-tabs navs-3">
<!-- 主题 -->
<li class="active">
<a data-toggle="tab"href="#tab-1">
<i class="fa fa-gear"></i>主题
</a>
</li>
<!-- 通知 -->
<li class="">
<a data-toggle="tab"href="#tab-2">
通知
</a>
</li>
<!-- 项⽬进度 -->

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。