白色實用風格的網站后臺管理源碼下載



6 20 7



模板描述:白色實用風格 網站 后臺管理,白色實用風格的網站后臺管理源碼下載html模板下載

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="static/css/admin.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="static/css/global_style.css">

2. 引入JS

<script type="text/javascript" src="static/layui/layui.js"></script>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.simple.min.js"></script>
<script type="text/javascript" src="static/js/admin.js"></script>

3. HTML代碼

<div class="tm-tpl tpl-white-hn small-item" style-name="tpl-white-hn">
	<!--導航欄-->
	<div class="tpl-left-sidebar">
		<ul>
				<li class="logo">
					<img class="user-upload" src="static/images/4a251abe82900c79733daa753664f701.jpg" alt="admin" title="admin">
					<span>LeoAdmin</span>
				</li>
				<!--<li class="nav-item active">
				<a href="index.html" class="a-item"><i class="fa fa-home nav-icon" aria-hidden="true"></i><span>首頁</span></a>
				</li>
				 -->
				<li class="nav-item">
					<a href="index.html" class="a-item"><i class="fa fa-home nav-icon"></i><span>首頁</span></a>
				</li>
				<li class="nav-item">
					<a href="auth_index.html" class="a-item"><i class="fa fa-users nav-icon"></i><span>權限控制臺</span></a>
					<ul class="nav-child-item has-child">
						<div class="nav-child-list">
							<li><a href="auth_index.html"><i class="fa fa-user-secret" aria-hidden="true"></i>權限管理</a></li>
							<li><a href="users.html"><i class="fa fa-users" aria-hidden="true"></i>角色組管理</a></li>
							<li><a href="user.html"><i class="fa fa-user" aria-hidden="true"></i>管理員們</a></li>
						</div>
					</ul>
				</li>
				<li class="nav-item">
					<a href="" class="a-item"><i class="fa fa-fire nav-icon"></i><span>測試中心</span></a>
					<ul class="nav-child-item has-child">
						<div class="nav-child-list">
							<li><a href=""><i class="fa fa-dashboard " aria-hidden="true"></i>視圖1</a></li>
						</div>
					</ul>
				</li>
				<div class="sidebar-footer">
					<ul class="clearfix">
						<a href="javascript:;" data-title="消息"><i class="fa fa-bell-o"></i><span class="badge">99+</span></a>
						<a href="javascript:;" class="dashboard" tag="style-bar" data-title="配色方案"> <i class="fa fa-dashboard "></i></a>
						<a href="javascript:;" class="user" tag="user-bar" data-title="個人中心"><i class="fa fa-user"></i></a>
						<a href="javascript:;" data-title="公眾號"><i class="fa fa-wechat"></i></a>
					</ul>
				</div>
			</ul>
	</div>
	<!--右側內容-->
	<div class="tpl-right-item">
		<div class="tpl-body">
			<!--頭部-->
			<div class="tpl-header">
				<div class="tpl-header-fluid">
					<div class="tpl-button switch-list">
						<i class="fa fa-hand-o-left"></i>
					</div>
					<div class="tpl-button refresh" title="刷新">
						<i class="fa fa-refresh"></i>
					</div>
					<div class="tpl-button text">
						<a href=""><i class="fa fa-home"></i> 首頁</a>
					</div>
					<div class="tpl-userbar">
						<ul>
							<li><a href="javascript:;" class="dashboard" tag="style-bar"><i class="fa fa-dashboard"></i></a></li>
							<li><a href="">歡迎你,admin</a></li>
							<li><a href="javascript:;" class="logout"><i class="fa fa-power-off"></i>退出登錄</a></li>
						</ul>
					</div>
				</div>
			</div>
			<!--內容-->
			<div class="tpl-content">
				<div class="content-pannel clearfix">
					<div class="layui-col-md8 clearfix">
						<div class="fpl-fluid">
							<div class="layui-col-md6">
								<div class="tpl-card">
									<div class="tpl-card-title">
										你好,世界
										<i class="fa fa-exclamation tpl-icon-tips" data-title="你好,世界"></i>
									</div>
									<div class="card-pannel">
										你是 九月夏天滾燙的浪,你是 忽而大雨瓢潑的向往,你是 飛越山川河流的大夢一場,你是 整夜白雪茫茫的路旁,你是 南半球的年少風光,你是無言 你是對望,你是 隔著落地窗的翅膀,你是 小城艷陽高照的清香,你是 無力抗拒不停追逐的磁場,你是 傍晚落日余暉的方向,你是我不能擁抱的短暫理想,你是旅途 你是故鄉,你是 不愿停下的難忘情長,你是 逃離廢墟的路途茫茫,你是 忽明忽暗的不悔時光,你是 一束生命的全力綻放,你是 認真書寫的一筆一劃,你是 幾縷發絲的錯誤生長,你是解藥 你是營養,你是 四海為家的回頭牽腸,你是 我獨享的遺憾和渴望,你是不愿醒來的夢啊柔情一場,我的名字 叫難忘, 我的名字叫 難忘。
									</div>
								</div>
							</div>
							<div class="layui-col-md6">
								<div class="tpl-card">
									<div class="tpl-card-title">你好,世界</div>
									<div class="card-pannel">
										你是 九月夏天滾燙的浪,你是 忽而大雨瓢潑的向往,你是 飛越山川河流的大夢一場,你是 整夜白雪茫茫的路旁,你是 南半球的年少風光,你是無言 你是對望,你是 隔著落地窗的翅膀,你是 小城艷陽高照的清香,你是 無力抗拒不停追逐的磁場,你是 傍晚落日余暉的方向,你是我不能擁抱的短暫理想,你是旅途 你是故鄉,你是 不愿停下的難忘情長,你是 逃離廢墟的路途茫茫,你是 忽明忽暗的不悔時光,你是 一束生命的全力綻放,你是 認真書寫的一筆一劃,你是 幾縷發絲的錯誤生長,你是解藥 你是營養,你是 四海為家的回頭牽腸,你是 我獨享的遺憾和渴望,你是不愿醒來的夢啊柔情一場,我的名字 叫難忘, 我的名字叫 難忘。
									</div>
								</div>
							</div>
							<div class="layui-col-md12">
								<div class="tpl-card">
									<div class="card-pannel">
										<div class="layui-carousel" id="carousel_1">
											<div carousel-item style="text-align: center;line-height: 300px;">
												<div>輪播條目1</div>
												<div>輪播條目2</div>
												<div>輪播條目3</div>
												<div>輪播條目4</div>
												<div>輪播條目5</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="layui-col-md12">
								<div class="tpl-card">
									<div class="echart" id="echart1" style="width: 500px;height: 250px;margin:0 auto">
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-md4">
						<div class="fpl-fluid">
							<div class="layui-col-md12">
								<div class="tpl-card">
									<div class="tpl-card-title">版本信息</div>
									<div class="card-pannel">
										<table class="layui-table" style="margin:0">
											<colgroup>
												<col width="100">
												<col>
												</colgroup>
											<tbody>
												<tr>
													<td>當前版本</td>
													<td>s1.0 pro <a href="javascript:;" class="card-a">更新日志</a></td>
												</tr>
												<tr>
													<td>PHP環境</td>
													<td>php 7.0.12-nts + Apche</td>
												</tr>
												<tr>
													<td>數據庫</td>
													<td>mySql</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<div class="layui-col-md12">
								<div class="tpl-card">
									<div class="tpl-card-title">版本信息</div>
									<div class="card-pannel">
										<table class="layui-table" style="margin:0">
											<colgroup>
												<col width="100">
												<col>
												</colgroup>
											<tbody>
												<tr>
													<td>當前版本</td>
													<td>s1.0 pro <a href="javascript:;" class="card-a">更新日志</a></td>
												</tr>
												<tr>
													<td>PHP環境</td>
													<td>php 7.0.12-nts + Apche</td>
												</tr>
												<tr>
													<td>數據庫</td>
													<td>mySql</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<div class="layui-col-md12">
								<div class="tpl-card">
									<div class="tpl-card-title">版本信息</div>
									<div class="card-pannel">
										<table class="layui-table" style="margin:0">
											<colgroup>
												<col width="100">
												<col>
												</colgroup>
											<tbody>
												<tr>
													<td>當前版本</td>
													<td>s1.0 pro <a href="javascript:;" class="card-a">更新日志</a></td>
												</tr>
												<tr>
													<td>PHP環境</td>
													<td>php 7.0.12-nts + Apche</td>
												</tr>
												<tr>
													<td>數據庫</td>
													<td>mySql</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<div class="layui-col-md12">
								<div class="tpl-card">
									<div class="tpl-card-title">版本信息</div>
									<div class="card-pannel">
										<table class="layui-table" style="margin:0">
											<colgroup>
												<col width="100">
												<col>
												</colgroup>
											<tbody>
												<tr>
													<td>當前版本</td>
													<td>s1.0 pro <a href="javascript:;" class="card-a">更新日志</a></td>
												</tr>
												<tr>
													<td>PHP環境</td>
													<td>php 7.0.12-nts + Apche</td>
												</tr>
												<tr>
													<td>數據庫</td>
													<td>mySql</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<div class="layui-col-md12">
								<div class="tpl-card">
									<div class="tpl-card-title">版本信息</div>
									<div class="card-pannel">
										<table class="layui-table" style="margin:0">
											<colgroup>
												<col width="100">
												<col>
												</colgroup>
											<tbody>
												<tr>
													<td>當前版本</td>
													<td>s1.0 pro <a href="javascript:;" class="card-a">更新日志</a></td>
												</tr>
												<tr>
													<td>PHP環境</td>
													<td>php 7.0.12-nts + Apche</td>
												</tr>
												<tr>
													<td>數據庫</td>
													<td>mySql</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--配色方案-->
			<div class="right-bar style-bar">
				<div class="right-bar-fluid">
					<div class="tpl-header-text">
						配色方案
					</div>
					<ul class="style-item clearfix" id="style-list">
						<li data-style="tpl-black-n">
							<div class="header-style"></div>
							<div class="left-style black">
								<div class="logo-style"></div>
							</div>
						</li>
						<li data-style="tpl-black-hn">
							<div class="header-style black-child"></div>
							<div class="left-style black">
								<div class="logo-style"></div>
							</div>
						</li>
						<li data-style="tpl-red-hn">
							<div class="header-style red-child"></div>
							<div class="left-style red">
								<div class="logo-style"></div>
							</div>
						</li>
						<li data-style="tpl-red-n">
							<div class="header-style"></div>
							<div class="left-style red">
								<div class="logo-style"></div>
							</div>
						</li>
						<li data-style="tpl-blackred-hn">
							<div class="header-style red"></div>
							<div class="left-style black">
								<div class="logo-style"></div>
							</div>
						</li>
						<li data-style="tpl-blackgreen-hn">
							<div class="header-style green"></div>
							<div class="left-style black">
								<div class="logo-style"></div>
							</div>
						</li>
						<li data-style="tpl-green-hn">
							<div class="header-style green-child"></div>
							<div class="left-style green">
								<div class="logo-style"></div>
							</div>
						</li>
						<li data-style="tpl-green-n">
							<div class="header-style"></div>
							<div class="left-style green">
								<div class="logo-style"></div>
							</div>
						</li>
						<li data-style="tpl-white-hn">
							<div class="header-style"></div>
							<div class="left-style white">
								<div class="logo-style"></div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!--用戶信息-->
			<div class="right-bar user-bar">
				<div class="right-bar-fluid">
					<div class="tpl-card">
						<div class="card-pannel">
							<div class="user-item">
								<img class="user-upload" src="static/images/4a251abe82900c79733daa753664f701.jpg">
								<h4 class="user-name">admin</h4>
								<p>時間模糊了很多東西,我依然愛你</p>
								<div class="user-tips">
									<a href="javascript:;" data-tips="13138003682"><i class="fa fa-phone"></i></a>
									<a href="javascript:;" data-tips="you can goin!"><i class="fa fa-star"></i></a>
									<a href="javascript:;" data-tips="547720744"><i class="fa fa-qq"></i></a>
									<a href="javascript:;" data-tips="Mr.LIU"><i class="fa fa-wechat"></i></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--尾部-->
			<div class="tpl-footer">
				<div class="tpl-footer-fluid">
					<a class="f-item-text">來自一位后臺工作者的零星之火</a>
					<a class="f-item-text">LeoAdmin</a>
					<a class="fitem-texy">2018 ?</a>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
		//Echarts圖表
		var Chart1 = echarts.init(document.getElementById("echart1"));
		Chart1.setOption({
		    series : [
		        {
		            name: '訪問來源',
		            type: 'pie',
		            radius: '55%',
		            data:[
		                {value:235, name:'視頻廣告'},
		                {value:274, name:'聯盟廣告'},
		                {value:310, name:'郵件營銷'},
		                {value:335, name:'直接訪問'},
		                {value:400, name:'搜索引擎'}
		            ]
		        }
		    ]
		});
	</script>
<!-- <script>
    	NProgress.start();
    	setTimeout(function() { NProgress.done()}, 1000);
 	</script>
 -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 分類 響應式 自適應 設備 風格 顏色 bootstrap bootstrap自適應 bootstrap響應式 pc+wap 移動+電腦 手機+電腦 后臺系統 后臺 系統 實用通用 實用 通用 白色
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 广西快乐双彩基本走势图 内蒙古彩福利彩票中心 1305彩票首页 上海快三查询结果 晓游游戏大厅 六肖稳赚买法 牌九 开什么矿赚钱 十三水棋牌游戏怎么赢 三肖期期准1001三肖期期准 体彩p3试机号后预测 万发彩票游戏 北京11选5 DNF灵魂怎么合最赚钱 手游卖装备卖药赚钱吗 足彩14场任选9场