<template>
	<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="/browser-history">本地书签</a></li>
								<!--
		
								<li><a href="/w3cnote/knowledge-start.html" style="font-weight: bold;" onclick="_hmt.push(['_trackEvent', '星球', 'click', 'start'])" title="我的圈子">我的圈子</a></li>
								<li><a href="javascript:;" class="runoob-pop">登录</a></li>
								-->
							</ul>
		
						</div>
					</div>
				</div>
		
			</div>
		
			<div id="menu" style="background-color:#c2adff;;width:13%;height: 1500px;float:left;">
				
				<ul>
		<!-- 			<li index!=0? class="a1": class="a111" v-for="value,index in head1">
						{{value}}
					</li> -->
					<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'> HTML教程</li>
					<li class='a1'> HTML简介</li>
					<li class='a1'> HTML编辑器</li>
					<li class='a1'> HTML基础</li>
					<li class='a1'> HTML元素</li>
					<li class='a1'> HTML属性</li>
					<li class='a1'> HTML标题</li>
					<li class='a1'> HTML段落</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">07 董春凤</span></h1>
					<hr>
				</div>
				<div>
					<IFRAME src="http://www.bing.com/s?wd=test" style="width: 100%;height: 800px">
		
					</IFRAME>
				</div>
			</div>
		
		
			<div id="menu2" style="background-color:#c2adff;;width:20%;height: 1500px;float:right;">
				<ul>
					<li>
						<h2 style="padding-left: 15px">菜单分类导航</h2></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'> XML教程</li>
					<li class='a1'> Web Service</li>
					<li class='a1'> 开发工具</li>
					<li class='a1'> 网站建设</li>
				</ul>
			</div>
		
		</div>
	</div>
</template>

<script>
	export default {
	  name: 'shiyan2',
	  props: {
	    msg: String,
	  },
	  data () {
	        return {
	          tittle: "实验二",
			  head1:["菜单",'HTML简介','JavaScript','服务器','数据分析','移动端','XML教程','web service','开发工具','网站建设','Python运算符','Python数字(Number)','Python字符串','Python列表','Python元组','Python字典','Python集合','Python编程第一步','Python条件控制','Python循环语句'],
	        }
	      },
		  methods:{
			  
		  },
	}
</script>

<style>
	.navigation {
	    background: #96b97d;
	}
	
	.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>