单页后台模版
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>后臺(tái)</title><link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body><ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#home" data-toggle="tab">首頁(yè)</a></li><li class="dropdown"><a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">內(nèi)容管理 <b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"><li><a href="#column" tabindex="-1" data-toggle="tab">欄目管理</a></li><li><a href="#article" tabindex="-1" data-toggle="tab">文章管理</a></li></ul></li><li><a href="#user" data-toggle="tab">用戶管理</a></li></ul><div id="myTabContent" class="tab-content"><div class="tab-pane fade in active" id="home"><!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts單文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts圖表var myChart = echarts.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['銷量']},xAxis : [{type : 'category',data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]}],yAxis : [{type : 'value'}],series : [{"name":"銷量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 為echarts對(duì)象加載數(shù)據(jù)
myChart.setOption(option); </script></div><!-----------------欄目管理-------------------------------> <div class="tab-pane fade" id="column"> <div class="row"><br><div class="col-xs-3" id="myScrollspy"><ul class="well" data-spy="affix" data-offset-top="125"><li><a href="#column-1">添加欄目</a></li><li><a href="#column-2">刪除欄目</a></li></ul></div><div class="col-xs-9"><h2 id="column-1">添加欄目</h2><div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;"><div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei"><form><input type="text" class="form-control" placeholder="請(qǐng)輸入欄目名稱"><br><input type="submit" value="提交添加" class="btn btn-primary"></form></div></div><h2 id="column-2">刪除欄目</h2> <div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;"><div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei"><form><input type="text" class="form-control" placeholder="請(qǐng)輸入欄目名稱"><br><input type="submit" value="提交添加" class="btn btn-primary"></form></div></div></div></div></div><!-----------------------文章管理---------------------------> <div class="tab-pane fade" id="article"><div class="row"><br><div class="col-xs-3" id="myScrollspy"><ul class="well" data-spy="affix" data-offset-top="125"><li><a href="#article-1">添加文章</a></li><li><a href="#article-2">刪除文章</a></li></ul></div><div class="col-xs-9"><h2 id="article-1">添加文章</h2><div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;"><div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei"><form><input type="text" class="form-control" placeholder="請(qǐng)輸入文章名稱"><br><input type="submit" value="提交添加" class="btn btn-primary"></form></div></div> <h2 id="article-2">刪除文章</h2> <div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;"><div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei"><form><input type="text" class="form-control" placeholder="請(qǐng)輸入欄目名稱"><br><input type="submit" value="提交添加" class="btn btn-primary"></form></div></div></div></div></div><!------------------------用戶管理-----------------------------------> <div class="tab-pane fade" id="user"><div class="row"><br><div class="col-xs-3" id="myScrollspy"><ul class="well" data-spy="affix" data-offset-top="125"><li><a href="#user-1">添加用戶</a></li><li><a href="#user-2">刪除用戶</a></li></ul></div><div class="col-xs-9"><h2 id="user-1">添加用戶</h2><div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;"><div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei"><form><input type="text" class="form-control" placeholder="請(qǐng)輸入用戶名稱"><br><input type="submit" value="提交添加" class="btn btn-primary"></form></div></div><h2 id="user-2">刪除用戶</h2> <div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;"><div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei"><form><input type="text" class="form-control" placeholder="請(qǐng)輸入欄目名稱"><br><input type="submit" value="提交添加" class="btn btn-primary"></form></div></div></div></div></div></div>
</body>
</html>
?
總結(jié)
- 上一篇： HDFS副本放置策略和机架感知
- 下一篇： 【JavaScript】document