<template>
<div class="hello">  
	<div>
			<h1 style="margin-bottom:0;">{{tittle}}</h1>
	</div>
<!--头部-->
  <div style="width:100%;height:100px;background-color:#f6f6f6;">
      <div style="width:30%;height:90px;float:left;text-align:center;line-height:90px;color:black;font-size: 40px;
  text-shadow: 5px 5px 5px black, 0px 0px 2px red, 2px 2px 3px green;
  }">Asexuality.COM</div>
      <div style="width:30%;height:90px;float:left"></div>
      <div style="width:40%;height:90px;float:left"><div style="width:80%;height:33px;background-color:#dfdfdf;margin-top:28.5px;">
              <input type="text" style="height:24px;width:97.4%;margin-left:0.8%;margin-top:1.5px;" placeholder="搜索……"autocomplete="off"/>
          </div>
      </div>
  </div>
  
  <div style="width:100%;height:30px;background-color:#96b97d;">
      <div class="title title1">首页
      <div style=" width:0;
          height:0;
          margin-left: 47%;
          margin-top: -4px;
          border-left:5px solid transparent;
          border-right:5px solid transparent;
          border-bottom:5px solid #fff;"></div>
      </div>
      <div class="title">菜鸟笔记</div>
      <div class="title">菜鸟工具</div>
      <div class="title">参考手记</div>
      <div class="title">用户笔记</div>
      <div class="title">测验/考试</div>
      <div class="title">云服务器</div>
      <div class="title">本地书签</div>
  </div>
  <div style="width: 100%;height: 20px;background-color: #f6f6f6"></div>
  <div style="width: 100%;height: 1000px;background-color: #f6f6f6">
  <div style="float:left;width: 5%;height: 900px;background-color: #f6f6f6;"></div>
  <!--侧边-->
      <div style="float:left;width: 12%;height: 900px;background-color: #f6f6f6;">
  <div style="width: 100%;height: 30px;background-color: #ededed;text-align:center;line-height:30px;color:#a4a4a4">
      ☒  HTML 教程
  </div>  
	<ul id="mei">
		<li  v-bind:class="[index!=0 ?  'a1': 'a111']"  v-for="value,index in head1">
			{{value}}
		</li><!-- 
          <li style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:center;line-height:40px"> HTML 简介</li>
          <li style="width: 100%;height: 40px;background-color: #ffffff;text-align:center;line-height:40px"> HTML 布局</li>
          <li style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:center;line-height:40px"> HTML 编辑器</li>
          <li style="width: 100%;height: 40px;background-color: #ffffff;text-align:center;line-height:40px"> HTML 基础</li>
          <li style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:center;line-height:40px"> HTML 元素</li>
          <li style="width: 100%;height: 40px;background-color: #ffffff;text-align:center;line-height:40px"> HTML 属性 </li>
          <li style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:center;line-height:40px"> HTML 标题</li>
          <li style="width: 100%;height: 40px;background-color: #ffffff;text-align:center;line-height:40px"> HTML 段落</li>
          <li style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:center;line-height:40px"> HTML 表单</li>
          <li style="width: 100%;height: 40px;background-color: #ffffff;text-align:center;line-height:40px"> HTML 链接 </li>
	 --></ul>
      </div>
      
      
  <!--HTML-->
      <div style="float:left;width: 65%;height: 450px;background-color: #fff  ;margin-left: 14px; border-top-left-radius: 10px;
          border-top-right-radius: 10px;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;">
  <div style="width:95%;height: 50px;background-color:#fff;color: #64854c; margin-left:30px;line-height:75px;font-size: 30px;font-weight:bold">
  
      ⇛ 48 韦可盈
  
      <div class="article-intro" id="content">
  	    <iframe src="https://www.runoob.com" height="300px" width="95%"></iframe>
      </div>
  </div>
  </div>
  <!--右侧边-->
  <div style="float:right;width: 15%;height: 900px;background-color: #f6f6f6;">
      <div style="width: 100%;height: 30px;background-color: #ededed;text-align:center;line-height:30px;color:#a4a4a4">
          ☒  分类导航
      </div >
              <div style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:center;line-height:40px"> HTML /CSS</div>
              <div style="width: 100%;height: 40px;background-color: #ffffff;text-align:center;line-height:40px"> javaScript</div>
              <div style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:center;line-height:40px"> 服务端</div>
              <div style="width: 100%;height: 40px;background-color: #ffffff;text-align:center;line-height:40px"> 数据库</div>
              <div style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:center;line-height:40px"> 数据分析</div>
              <div style="width: 100%;height: 40px;background-color: #ffffff;text-align:center;line-height:40px"> 移动端 </div>
              <div style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:center;line-height:40px"> XML 教程</div>
              <div style="width: 100%;height: 40px;background-color: #ffffff;text-align:center;line-height:40px"> A SP.NET</div>
              <div style="width: 100%;height: 40px;background-color: #fbfbfb;text-align:center;line-height:40px"> Web Service</div>
              <div style="width: 100%;height: 40px;background-color: #ffffff;text-align:center;line-height:40px"> 开发工具 </div>
          </div>
      </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
        return {
          tittle: "实验一",
		  
  			  head1:["HTML 简介",'HTML 布局','HTML 编辑','HTML 基础','HTML 元素','HTML 属性','HTML 标题','HTML 段落','HTML 表单','HTML 链接'],
        }
      },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#mei{
	width: 73%;
	height: 400px;
	background-color: #fbfbfb;
	text-align:center;
	line-height:40px;
}
.title{
        width:6%;height:30px;float:left;font-size:14px;color:#fff;text-align:center;line-height:30px;
      }
    .title1{
        margin-left:5%;

           }
    .yuanjiao{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
       
			 }
</style>