天天看點
傳回

單頁背景模版

<!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">
         内容管理 
         <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準備一個具備大小（寬高）的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">
        // 基于準備好的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對象加載資料 
        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>
javascript
上一篇: 力扣算法回溯篇：子集II
下一篇: CSS2樣式表(屬性·輪廓)

繼續閱讀