<template>
  <div class="hello">
    <div>
    		<div>
    			<h1 style="margin-bottom:0;">{{tittle}}</h1>
    		</div>
    		
    		<div id="container" style="width:100%">
    		
    			<div id="header" style="background-color:#FFA500;">
    				<div class="container navigation">
    					<div class="row">
    						<div class="col nav">
    							<ul class="pc-nav" id="runoob-detail-nav">
    								<li><a href="//www.runoob.com/">首页</a></li>
    								<li><a href="/html/html-tutorial.html">HTML</a></li>
    								<li><a href="/css/css-tutorial.html">CSS</a></li>
    								<li><a href="/js/js-tutorial.html">JavaScript</a></li>
    								<li><a href="javascript:void(0);" data-id="vue">Vue</a></li>
    								<li><a href="javascript:void(0);" data-id="bootstrap">Bootstrap</a></li>
    								<li><a href="/nodejs/nodejs-tutorial.html">NodeJS</a></li>
    								<li><a href="/python3/python3-tutorial.html">Python3</a></li>
    								<li><a href="/python/python-tutorial.html">Python2</a></li>
    								<li><a href="/java/java-tutorial.html">Java</a></li>
    								<li><a href="/cprogramming/c-tutorial.html">C</a></li>
    								<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
    								<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
    								<li><a href="/go/go-tutorial.html">Go</a></li>
    								<li><a href="/sql/sql-tutorial.html">SQL</a></li>
    								<li><a href="/linux/linux-tutorial.html">Linux</a></li>
    								<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
    								<li><a href="/browser-history">本地书签</a></li>
    							
    							</ul>
    		
    						</div>
    					</div>
    				</div>
    		
    			</div>
    		
    			<div id="menu" style="background-color:#c5ebff;;width:13%;height: 1500px;float:left;">
    				
    				<ul>

    					<li  v-bind:class="[index!=0 ?  'a1': 'a111']"  v-for="value,index in head1">
    						{{value}}
    					</li>
    					<!-- <li><h2 style="padding-left: 15px">菜单</h2></li>
    		
    					<li class='a1'> Python3简介</li>
    					<li class='a1'> Python3环境搭建</li>
    					<li class='a1'> Python3 VScode</li>
    					<li class='a1'> Python3基础语法</li>
    					<li class='a1'> Python3基本数据类型</li>
    					<li class='a1'> Python3数据类型转换</li>
    					 -->
    				</ul>
    			</div>
    		
    			<div id="content"
    				 style="background-color:#EEEEEE;;width:63%;height: 1500px;    margin-left: 18px;    padding-left: 20px; float:left;">
    				<div><h1><span style="background-color: #5bc0de;text-align: center">24 梁存景</span></h1>
    					<hr>
    				</div>
    				<div>
    					<IFRAME src="https://daohang.qq.com/?fr=hmpage" style="width: 100%;height: 800px">
    		
    					</IFRAME>
    				</div>
    			</div>
    		
    		
    			<div id="menu2" style="background-color:#ffdbc0;;width:20%;height: 1500px;float:right;">
					<li>
						<h2 style="padding-left: 15px">{{sy}}</h2></li>
    				<ul>
    					<li  v-bind:class="[index!=0 ?  'a1': 'a111']"  v-for="value,index in sy1">
    						{{value}}
    					</li>
    					
    <!-- 					<li class='a1'> HTML/CSS</li>
    					<li class='a1'> JavaScript</li>
    					<li class='a1'> 服务端</li>
    					<li class='a1'> 数据库</li>
    					<li class='a1'> 数据分析</li>
    					<li class='a1'> 移动端</li>
    					<li class='a1'> XML教程</li>
    					<li class='a1'> ASP.NET</li>
    					<li class='a1'> Web Service</li>
    					<li class='a1'> 开发工具</li>
    					<li class='a1'> 网站建设</li>
     -->				</ul>
    			</div>
    		
    		</div>
    	</div>
  </div>
</template>

<script>
export default {
	  name: 'HelloWorld',
	  props: {
	    msg: String,
	  },
	  data () {
	        return {
	          tittle: "实验",
			  head1:["菜单",'Python3简介','Python3环境搭建','Python3VScode','Python3基础语法','Python3基本数据类型','Python3数据类型转换'],
			  sy:"分类导航",
			  sy1:['HTML/CSS','JavaScript','服务端','数据库','数据分析'],
	        }
	      },
		  methods:{
			  
		  },
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navigation {
	    background: #b2b9ae;
	}
	
	.container {
	    padding-left: 10px;
	    padding-right: 10px;
	}
	.row {
	    width: 100%;
	    max-width: 1260px;
	    min-width: 755px;
	    margin: 0 auto;
	    overflow: hidden;
	}
	.nav {
	    text-transform: uppercase;
	}
	
	.nav ul, .nav-sub ul {
	    list-style: none;
	    white-space: nowrap;
	}
	
	li, ol, p, ul {
	    line-height: 1.5em;
	}
	
	.nav li, .nav-sub li {
	    display: inline;
	    margin: 0 20px 0 0;
	}
	.a1{
	    padding-left: 15px;
	    padding-bottom: 30px;
	}
	.a111{
		padding-left: 15px;
		color: #FFA500;
	}
</style>