日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁 >

单页后台模版

發(fā)布時間:2025/5/22 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 单页后台模版 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>后臺</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">首頁</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)備一個具備大小(寬高)的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對象加載數(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="請輸入欄目名稱"><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="請輸入欄目名稱"><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="請輸入文章名稱"><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="請輸入欄目名稱"><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="請輸入用戶名稱"><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="請輸入欄目名稱"><br><input type="submit" value="提交添加" class="btn btn-primary"></form></div></div></div></div></div></div> </body> </html>

?

總結(jié)

以上是生活随笔為你收集整理的单页后台模版的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。